zoeissleeping/100DaysOfCode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add day 11

Browse Source
This commit is contained in:
Zoe
2022-10-03 19:16:24 -05:00
parent 15da8f76d7
commit bacd05cf31
37 changed files with 4486 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
day11/.env Normal file
View File

@@ -0,0 +1 @@
VITE_VERBOSE = false

20
day11/index.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Day1</title>
<script src="/src/main.ts"
async
type="module"></script>
</head>
<body>
<div id="app"><!--ssr-outlet--><noscript>You need javascript to run this app</noscript></div>
</body>
</html>

3635
day11/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

24
day11/package.json Normal file
View File

@@ -0,0 +1,24 @@
{
"name": "day1",
"type": "module",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"dev:ssr": "ts-node-esm server.ts",
"build": "tsc && vite build",
"preview": "vite preview"
},
"devDependencies": {
"@types/express": "^4.17.14",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8",
"ts-node": "^10.9.1",
"typescript": "^4.8.4",
"vite": "^3.1.3"
},
"dependencies": {
"express": "^4.18.1"
}
}

6
day11/postcss.config.cjs Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

BIN
day11/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

12
day11/src/components/cookieInput.ts Normal file
View File

@@ -0,0 +1,12 @@
export const CookieInput = () => {
return `
<div class="mb-2">
<h2 class="text-xl font-semibold text-center">Username cookie is: {appState.contents.cookie}</h2>
</div>
<div class="flex justify-center flex-col">
<input placeholder="username..." class="py-2 px-4 resize-none bg-zinc-800 rounded-md shadow-md my-2 border border-zinc-800 placeholder:italic placeholder:text-gray-300" d-model="cookiedata" />
{appState.contents.cookiedata}
<button class="bg-blue-600 font-semibold rounded-md py-1 px-2 text-sm" d-click="appState.contents.cookie = appState.contents.cookiedata; setCookie('username', appState.contents.cookiedata, '365');">Submit Cookie</button>
</div>
`
}

22
day11/src/components/counter.ts Normal file
View File

@@ -0,0 +1,22 @@
import minus from '../icons/minus.svg'
import plus from '../icons/plus.svg'
import refresh from '../icons/refresh.svg'
export const Counter = () => {
return `
<div class="mb-2">
<h2 class="text-xl font-semibold text-center">count is: { appState.contents.count }</h2>
</div>
<div class="flex justify-center">
<button d-on:click="appState.contents.count--" class="transition-colors p-3 duration-300 active:bg-red-700 hover:bg-red-600 hover:text-zinc-100 mr-1">
<img src=${minus} alt="minus" />
</button>
<button d-on:click="appState.contents.count = 0" class="transition-colors p-3 duration-300 active:bg-zinc-700 hover:bg-zinc-800 hover:text-red-100 mr-1">
<img src=${refresh} alt="reset">
</button>
<button d-on:click="appState.contents.count++" class="transition-colors p-3 duration-300 active:bg-green-700 hover:bg-green-600 hover:text-green-100">
<img src=${plus} alt="plus" />
</button>
</div>
`
}

12
day11/src/components/htmlInput.ts Normal file
View File

@@ -0,0 +1,12 @@
export const HtmlInput = () => {
return `
<div class="mb-2">
<h2 class="text-xl font-semibold text-center" d-html>html input is: {appState.contents.html}</h2>
</div>
<div class="flex justify-center">
<div>
<input placeholder="text..." class="py-2 px-4 resize-none bg-zinc-800 rounded-md shadow-md my-2 border border-zinc-800 placeholder:italic placeholder:text-gray-300" d-model="html" />
</div>
</div>
`
}

23
day11/src/components/myDad.ts Normal file
View File

@@ -0,0 +1,23 @@
export const MyDad = () => {
return `
<div class="mb-2">
<h2 class="text-xl font-semibold text-center">My dad {appState.contents.year}</h2>
</div>
<div class="flex justify-center">
<input placeholder="ex: 1985" class="no-arrows py-2 px-4 resize-none bg-zinc-800 rounded-md shadow-md my-2 border border-zinc-800 placeholder:italic placeholder:text-gray-300" type="number" d-model="year">
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
</style>
`
}

5
day11/src/components/routerLink.ts Normal file
View File

@@ -0,0 +1,5 @@
export const RouterLink = (link: string, name: string) => {
return `
<a href="${link}" d-on:click="event.preventDefault(); renderPage('${link}')">${name}</a>
`
}

12
day11/src/components/textInput.ts Normal file
View File

@@ -0,0 +1,12 @@
export const TextInput = () => {
return `
<div class="mb-2">
<h2 class="text-xl font-semibold text-center">Input is: {appState.contents.text}</h2>
</div>
<div class="flex justify-center">
<div>
<input placeholder="text..." class="py-2 px-4 resize-none bg-zinc-800 rounded-md shadow-md my-2 border border-zinc-800 placeholder:italic placeholder:text-gray-300" d-model="text" />
</div>
</div>
`
}

1
day11/src/icons/minus.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -11 24 24" width="24" fill="white"><path d="M1 0h12a1 1 0 0 1 0 2H1a1 1 0 1 1 0-2z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 149 B

1
day11/src/icons/plus.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4.5 -4.5 24 24" width="24" fill="white"><path d="M8.9 6.9v-5a1 1 0 1 0-2 0v5h-5a1 1 0 1 0 0 2h5v5a1 1 0 1 0 2 0v-5h5a1 1 0 1 0 0-2h-5z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 199 B

1
day11/src/icons/refresh.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1.5 -2.5 24 24" width="24" fill="white"><path d="M17.83 4.194l.42-1.377a1 1 0 1 1 1.913.585l-1.17 3.825a1 1 0 0 1-1.248.664l-3.825-1.17a1 1 0 1 1 .585-1.912l1.672.511A7.381 7.381 0 0 0 3.185 6.584l-.26.633a1 1 0 1 1-1.85-.758l.26-.633A9.381 9.381 0 0 1 17.83 4.194zM2.308 14.807l-.327 1.311a1 1 0 1 1-1.94-.484l.967-3.88a1 1 0 0 1 1.265-.716l3.828.954a1 1 0 0 1-.484 1.941l-1.786-.445a7.384 7.384 0 0 0 13.216-1.792 1 1 0 1 1 1.906.608 9.381 9.381 0 0 1-5.38 5.831 9.386 9.386 0 0 1-11.265-3.328z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 561 B

12
day11/src/layouts/404.ts Normal file
View File

@@ -0,0 +1,12 @@
import { RouterLink } from '../components/routerLink';
export default () => {
return `
<div class="grid place-items-center p-3 content-center min-h-screen">
<h1 class="text-4xl font-bold">404</h1>
<h2 class="text-2xl font-semibold">Looks like you're lost</h3>
<h3 class="text-xl font-semibold">${RouterLink('/', 'return home')}</h3>
</div>
`
}

39
day11/src/lib/ReactiveObject.ts Normal file
View File

@@ -0,0 +1,39 @@
export class Reactive {
[x: string]: any;
constructor(obj: any) {
this.contents = obj;
this.listeners = {};
this.makeReactive(obj);
}
makeReactive(obj: any) {
Object.keys(obj).forEach(prop => this.makePropReactive(obj, prop));
}
makePropReactive(obj: any, key: string) {
let value = obj[key];
// Gotta be careful with this here
const that = this;
Object.defineProperty(obj, key, {
get() {
return value;
},
set(newValue) {
value = newValue;
that.notify(key)
}
})
}
listen(prop: any, handler: any) {
if (!this.listeners[prop]) this.listeners[prop] = [];
this.listeners[prop].push(handler);
}
notify(prop: any) {
this.listeners[prop].forEach((listener: (arg0: any) => any) => listener(this.contents[prop]));
}
}

39
day11/src/lib/cookieManager.ts Normal file
View File

@@ -0,0 +1,39 @@
export function setCookie(name: string, value: string, expires: any, path?: string, domain?: string) {
var cookie = name.trimEnd() + "=" + escape(value) + ";";
if (expires) {
// If it's a date
if(expires instanceof Date) {
// If it isn't a valid date
if (isNaN(expires.getTime()))
expires = new Date();
}
else
expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24);
cookie += "expires=" + expires.toGMTString() + ";";
}
if (path)
cookie += "path=" + path + ";";
if (domain)
cookie += "domain=" + domain + ";";
document.cookie = cookie;
}
export function getCookie(name: string) {
let cname = name + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(cname) == 0) {
return c.substring(cname.length, c.length);
}
}
return "";
}

206
day11/src/lib/router.ts Normal file
View File

@@ -0,0 +1,206 @@
import { compileToString } from './templateRenderer'
import { appState } from '../main'
const documentBody = document.getElementById('app')
// Global function to handle rendering a page and navigation
export async function renderPage(route?: string) {
if (!documentBody) {
throw new Error('Fatal Error: element with id app not found')
}
if (route) history.pushState('', '', route);
let fileName: any = window.location.pathname.split('/');
if (fileName[1] === '') {
fileName = '/index';
} else {
fileName = fileName.join('/').toLowerCase().trim();
}
const template = await loadPage(fileName);
const stringifiedTemplate = await compileToString(template);
if (import.meta.env.VITE_VERBOSE && !import.meta.env.PROD) {
console.groupCollapsed('Loaded page ' + fileName);
console.info('Template: ' + template)
console.info('stringified template: ' + stringifiedTemplate)
console.groupEnd()
}
documentBody.innerHTML = await eval(stringifiedTemplate);
// here we hydrate/re-hydrate the page content
await hydratePage()
}
async function loadPage(page: string) {
let file
try {
file = await import(/* @vite-ignore */ '../pages' + page);
} catch (e) {
console.log(e)
file = await import(/* @vite-ignore */ '../layouts/404');
}
const template = await file.default();
return template;
}
// function to turn the template into reactive content "hydating" a page
export async function hydratePage() {
if (!documentBody) {
throw new Error('Fatal Error: element with id app not found')
}
// for every item in the appState lets check for any element with the "checksum", a hex code equivalent of the item name
Object.keys(appState.contents).forEach((e) => {
if (e === undefined) return
// here we check for elements with the name of "data-token-<hex code of the item name>"
const uuid = e.split("").map(c => c.charCodeAt(0).toString(16).padStart(2, "0")).join("")
const listeningElements = document.querySelectorAll(`[${"data-token-" + uuid}]`)
listeningElements.forEach((elm) => {
if (elm.parentElement?.getAttribute('d-once') !== null) {
elm.parentElement?.removeAttribute('d-once');
return;
}
if (elm.parentElement?.getAttribute('d-html') !== null) {
appState.listen(e, (change: any) => elm.innerHTML = change);
elm.parentElement?.removeAttribute('d-html')
} else {
appState.listen(e, (change: any) => elm.textContent = change);
}
})
})
// here we look for elements with the d-on:click attribute and on click run the function in the attribute
let elms = documentBody.querySelectorAll('*[d-on\\3A click]')
elms.forEach((e) => {
const clickFunction = e.getAttribute("d-on\:click")
e.removeAttribute('d-on\:click')
if (!clickFunction) return;
e.addEventListener('click', () => {
eval(clickFunction)
})
})
// here we determine if an element should be deleted form the DOM via the d-if directive
let conditionalElms = document.querySelectorAll('*[d-if]')
conditionalElms.forEach(async (e) => {
const condition = e.getAttribute('d-if')
let siblingConditionalElms: any = []
// recursively check for subsequent elements with the d-else of d-else-if attribute
function checkForConditionSibling(elm: any) {
if (elm.nextElementSibling?.getAttribute('d-else-if') !== null) {
siblingConditionalElms.push(elm.nextElementSibling)
checkForConditionSibling(elm.nextElementSibling)
}
if (elm.nextElementSibling?.getAttribute('d-else') !== null) {
siblingConditionalElms.push(elm.nextElementSibling)
}
}
checkForConditionSibling(e)
function resetHTML() {
e.innerHTML = '<!-- d-if -->'
for (let i = 0; i < siblingConditionalElms.length; i++) {
siblingConditionalElms[i].innerHTML = '<!-- d-if -->'
}
}
let ifStatement = `if (!!eval(condition)) {
e.innerHTML = originalHTML
} `
for (let i = 0; i < siblingConditionalElms.length; i++) {
console.log(i)
const originHTML = siblingConditionalElms[i].innerHTML
siblingConditionalElms[i].innerHTML = '<!-- d-if -->'
let statementDirective = 'else'
if (siblingConditionalElms[i].getAttribute('d-else-if') !== null) {
statementDirective = 'else if'
}
const condition = eval(`siblingConditionalElms[i].getAttribute('d-' + statementDirective.split(' ').join('-'))`)
if (statementDirective == 'else if') {
statementDirective = 'else if (' + condition + ')'
}
ifStatement = ifStatement + statementDirective + `{
siblingConditionalElms[${i}].innerHTML = "${originHTML}"
}`
}
e.removeAttribute('d-if')
const originalHTML = e.innerHTML
if (!condition) return;
if (condition.includes("appState.contents.")) {
let reactiveProp: any = /appState\.contents\.[a-zA-Z]+/.exec(condition)
if (!reactiveProp) return;
reactiveProp = reactiveProp[0].split('.')[2]
appState.listen(reactiveProp, () => {
resetHTML()
eval(ifStatement)
})
}
eval(ifStatement)
})
let pointerEnterElms = document.querySelectorAll('*[d-on\\3A pointerEnter]')
pointerEnterElms.forEach((e) => {
const enterFunction = e.getAttribute('d-on\:pointerEnter')
e.removeAttribute('d-on\:pointerEnter')
if (!enterFunction) return;
e.addEventListener('pointerenter', (event: any) => {
eval(enterFunction)
})
})
let pointerExitElms = document.querySelectorAll('*[d-on\\3A pointerExit]')
pointerExitElms.forEach((e) => {
const exitFunction = e.getAttribute('d-on\:pointerExit')
e.removeAttribute('d-on\:pointerExit')
if (!exitFunction) return;
e.addEventListener('pointerleave', (event: any) => {
eval(exitFunction)
})
})
let mouseDownElms = document.querySelectorAll('*[d-on\\3A mouseDown]')
mouseDownElms.forEach((e) => {
const downFunction = e.getAttribute('d-on\:mouseDown')
e.removeAttribute('d-on\:mouseDown')
if (!downFunction) return;
e.addEventListener('mousedown', (event: any) => {
eval(downFunction)
})
})
let mouseUpElms = document.querySelectorAll('*[d-on\\3A mouseUp]')
mouseUpElms.forEach((e) => {
const dupFunction = e.getAttribute('d-on\:mouseUp')
e.removeAttribute('d-on\:mouseUp')
if (!dupFunction) return;
e.addEventListener('mouseup', (event: any) => {
eval(dupFunction)
})
})
// here we look for elements with the d-model attribute and if there is any input in the element then we update the appState item with the name
// of the attribute value
// example: if the user types "hello" into a text field with the d-model attribute of "text" then we update the appState item with the name "text"
// to "hello"
// similar to vue.js v-model attribute
let modelElms = document.querySelectorAll('input[d-model], textarea[d-model]');
modelElms.forEach((e) => {
const modelName = e.getAttribute("d-model")
if (!modelName) return;
e.addEventListener('input', (event: any) => {
appState.contents[modelName] = event.target.value
})
})
}

65
day11/src/lib/templateRenderer.ts Normal file
View File

@@ -0,0 +1,65 @@
export const compileToString = async (template: string) => {
const ast = parse(template);
let fnStr = `\`\``;
ast.map(async t => {
// checking to see if it is an interpolation
if (t.startsWith("{") && t.endsWith("}")) {
// TODO: rewrite comment
let bracketVariable = t.split(/{|}/).filter(Boolean)[0].trim();
const parentElement = fnStr.split(t)[0].split('>')
const isRawHTML = parentElement[parentElement.length-2].includes('d-html')
if (bracketVariable.startsWith("appState.contents.")) {
const uuid = bracketVariable.substring(bracketVariable.length, 18).split('').map(c => c.charCodeAt(0).toString(16).padStart(2, "0")).join("");
fnStr = fnStr.substring(0, fnStr.length - 1) + `<span data-token-${uuid}>\``;
} else {
fnStr = fnStr.substring(0, fnStr.length - 1) + `<span>\``;
}
let runVar = `((${bracketVariable}).toString().replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'))`
if (isRawHTML) {
runVar = `(${bracketVariable})`
}
fnStr += `+ (${runVar})` + `+\`</span>\``;
} else {
// append the string to the fnStr
fnStr += `+\`${t}\``;
}
});
if (import.meta.env.VITE_VERBOSE && !import.meta.env.PROD) {
console.groupCollapsed('Compiled tempalte to String')
console.info('Template String: ' + fnStr)
console.groupEnd()
}
return fnStr;
}
// this function will turn a string like "hi {user}" into an array that looks something like "["hi", "{user}"] so we can loop over the array elements
// when compiling the template
var parse = (template: string) => {
let result = /{(.*?)}/g.exec(template);
const arr = [];
let firstPos;
while (result) {
firstPos = result.index;
if (firstPos !== 0) {
arr.push(template.substring(0, firstPos));
template = template.slice(firstPos);
}
arr.push(result[0]);
template = template.slice(result[0].length);
result = /{(.*?)}/g.exec(template);
}
if (template) arr.push(template);
return arr;
}
export const render = (template: string) => {
return compileToString(template)
}

26
day11/src/main.ts Normal file
View File

@@ -0,0 +1,26 @@
import { Reactive } from './lib/ReactiveObject'
import { renderPage, hydratePage } from './lib/router';
import { getCookie } from './lib/cookieManager';
import '/src/style.css';
export const appState = new Reactive({
count: 0,
cookie: getCookie('username'),
text: '',
html: '',
year: '',
cookiedata: "",
});
// waits for the page to fully load to render the page from the virtDOM
window.addEventListener('load', async () => {
// loadPage after all the index is loaded
if (!import.meta.env.SSR) {
await renderPage()
} else {
await hydratePage()
}
window.onpopstate = async () => {
await renderPage()
}
})

24
day11/src/pages/experiences/day1-2.ts Normal file
View File

@@ -0,0 +1,24 @@
import { Counter } from '../../components/counter';
import { RouterLink } from '../../components/routerLink';
export default () => {
return `
<div class="grid place-items-center p-3 content-center min-h-screen">
<div class="p-6 border-neutral-800 rounded-lg container__content border">
<div class="w-80 max-w-full text-center">
<h1 class="text-2xl font-semibold">Day 1 & 2</h1>
<h3 class="text-lg">This is the day I worked on reactivity, simple click attributes and templates.</h3>
</div>
<br/>
<div class="p-2 border border-neutral-800 rounded-md shadow-md">
${Counter()}
</div>
<br/>
<div class="text-center">
Return ${RouterLink('/', 'Home')}
</div>
</div>
`;
}
export const layout = 'default'

23
day11/src/pages/experiences/day11.ts Normal file
View File

@@ -0,0 +1,23 @@
import { RouterLink } from '../../components/routerLink';
export default () => {
return `
<div class="grid place-items-center p-3 content-center min-h-screen">
<div class="p-6 border-neutral-800 rounded-lg container__content border">
<div class="min-w-full text-center">
<h1 class="text-2xl font-semibold">Day 9</h1>
<h3 class="text-lg">On day 11 I worked with pointer events.</h3>
</div>
<br/>
<div class="p-2 border border-neutral-800 rounded-md shadow-md">
<div id="ad" class="p-6 rounded-md bg-gray-600 transition-colors" d-on:pointerEnter="document.getElementById('ad').classList.toggle('!bg-gray-700')" d-on:pointerExit="document.getElementById('ad').classList.toggle('!bg-gray-700')" d-on:mouseDown="document.getElementById('ad').classList.toggle('!bg-gray-800')" d-on:mouseUp="document.getElementById('ad').classList.toggle('!bg-gray-800')">asd</div>
</div>
<br/>
<div class="text-center">
Return ${RouterLink('/', 'Home')}
</div>
</div>
`;
}
export const layout = 'default'

24
day11/src/pages/experiences/day3.ts Normal file
View File

@@ -0,0 +1,24 @@
import { RouterLink } from '../../components/routerLink';
import { TextInput } from '../../components/textInput';
export default () => {
return `
<div class="grid place-items-center p-3 content-center min-h-screen">
<div class="p-6 border-neutral-800 rounded-lg container__content border">
<div class="min-w-full text-center">
<h1 class="text-2xl font-semibold">Day 3</h1>
<h3 class="text-lg">On day 3 I added a d-model attribute.</h3>
</div>
<br/>
<div class="p-2 border border-neutral-800 rounded-md shadow-md">
${TextInput()}
</div>
<br/>
<div class="text-center">
Return ${RouterLink('/', 'Home')}
</div>
</div>
`;
}
export const layout = 'default'

24
day11/src/pages/experiences/day5.ts Normal file
View File

@@ -0,0 +1,24 @@
import { RouterLink } from '../../components/routerLink';
export default () => {
return `
<div class="grid place-items-center p-3 content-center min-h-screen">
<div class="p-6 border-neutral-800 rounded-lg container__content border">
<div class="min-w-full text-center">
<h1 class="text-2xl font-semibold">Day 5</h1>
<h3 class="text-lg">On day 5 I learnt about SPA routing.</h3>
</div>
<br/>
<div class="p-2 border border-neutral-800 rounded-md shadow-md">
Go ${RouterLink('/experiences/routes/page2', 'Deeper')}
Go ${RouterLink('/experiences/routes/deeper/deep', 'So deep')}
</div>
<br/>
<div class="text-center">
Return ${RouterLink('/', 'Home')}
</div>
</div>
`;
}
export const layout = 'default'

24
day11/src/pages/experiences/day6.ts Normal file
View File

@@ -0,0 +1,24 @@
import { CookieInput } from '../../components/cookieInput';
import { RouterLink } from '../../components/routerLink';
export default () => {
return `
<div class="grid place-items-center p-3 content-center min-h-screen">
<div class="p-6 border-neutral-800 rounded-lg container__content border">
<div class="min-w-full text-center">
<h1 class="text-2xl font-semibold">Day 6</h1>
<h3 class="text-lg">On day 6 I learnt about cookies.</h3>
</div>
<br/>
<div class="p-2 border border-neutral-800 rounded-md shadow-md">
${CookieInput()}
</div>
<br/>
<div class="text-center">
Return ${RouterLink('/', 'Home')}
</div>
</div>
`;
}
export const layout = 'default'

25
day11/src/pages/experiences/day7.ts Normal file
View File

@@ -0,0 +1,25 @@
import { RouterLink } from '../../components/routerLink';
export default () => {
return `
<div class="grid place-items-center p-3 content-center min-h-screen">
<div class="p-6 border-neutral-800 rounded-lg container__content border">
<div class="min-w-full text-center">
<h1 class="text-2xl font-semibold">Day 7</h1>
<h3 class="text-lg">On day 7 I got plain javascript running in my templates.</h3>
</div>
<br/>
<div class="p-2 border border-neutral-800 rounded-md shadow-md">
<p>1 + 2 = {1+2}</p>
<p>"string" substringed with 0, 1 = {"string".substring(0, 1)}</p>
<p>Current url is {window.location}</p>
</div>
<br/>
<div class="text-center">
Return ${RouterLink('/', 'Home')}
</div>
</div>
`;
}
export const layout = 'default'

27
day11/src/pages/experiences/day8-10.ts Normal file
View File

@@ -0,0 +1,27 @@
import { Counter } from '../../components/counter';
import { RouterLink } from '../../components/routerLink';
export default () => {
return `
<div class="grid place-items-center p-3 content-center min-h-screen">
<div class="p-6 border-neutral-800 rounded-lg container__content border">
<div class="min-w-full text-center">
<h1 class="text-2xl font-semibold">Day 8 & 10</h1>
<h3 class="text-lg">On day 8 & 10 I played around with conditional rendering.</h3>
</div>
<br/>
<div class="p-2 border border-neutral-800 rounded-md shadow-md">
${Counter()}
<p d-if="appState.contents.count == 0">The count is exactly 0.</p>
<p d-else-if="appState.contents.count == 1">The count is exactly 1.</p>
<p d-else>The count is not 0 or 1.</p>
</div>
<br/>
<div class="text-center">
Return ${RouterLink('/', 'Home')}
</div>
</div>
`;
}
export const layout = 'default'

24
day11/src/pages/experiences/day9.ts Normal file
View File

@@ -0,0 +1,24 @@
import { HtmlInput } from '../../components/htmlInput';
import { RouterLink } from '../../components/routerLink';
export default () => {
return `
<div class="grid place-items-center p-3 content-center min-h-screen">
<div class="p-6 border-neutral-800 rounded-lg container__content border">
<div class="min-w-full text-center">
<h1 class="text-2xl font-semibold">Day 9</h1>
<h3 class="text-lg">Day 9 I worked with unsafe HTML.</h3>
</div>
<br/>
<div class="p-2 border border-neutral-800 rounded-md shadow-md">
${HtmlInput()}
</div>
<br/>
<div class="text-center">
Return ${RouterLink('/', 'Home')}
</div>
</div>
`;
}
export const layout = 'default'

16
day11/src/pages/experiences/routes/deeper/deep.ts Normal file
View File

@@ -0,0 +1,16 @@
import { RouterLink } from '../../../../components/routerLink';
export default () => {
return `
<div class="grid place-items-center p-3 content-center min-h-screen">
<div class="p-6 border-neutral-800 rounded-lg container__content border">
<h1 class="text-2xl font-semibold">nested page</h1>
<br/>
<div class="grid grid-cols-1">
This is a deeply nested page
Go ${RouterLink('/experiences/day5', 'back')}
</div>
</div>
`;
}

16
day11/src/pages/experiences/routes/page2.ts Normal file
View File

@@ -0,0 +1,16 @@
import { RouterLink } from '../../../components/routerLink';
export default () => {
return `
<div class="grid place-items-center p-3 content-center min-h-screen">
<div class="p-6 border-neutral-800 rounded-lg container__content border">
<h1 class="text-2xl font-semibold">Page 2</h1>
<br/>
<div class="grid grid-cols-1">
This is page 2
Go ${RouterLink('/experiences/day5', 'back')}
</div>
</div>
`;
}

24
day11/src/pages/index.ts Normal file
View File

@@ -0,0 +1,24 @@
import { RouterLink } from '../components/routerLink';
export default () => {
return `
<div class="grid place-items-center p-3 content-center min-h-screen">
<div class="p-6 border-neutral-800 rounded-lg container__content border">
<h1 class="text-2xl font-semibold">100DaysOfCode Progress</h1>
<br/>
<div class="grid grid-cols-1">
${RouterLink('/experiences/day1-2', 'Day 1 & 2')}
${RouterLink('/experiences/day3', 'Day 3')}
Day 4 I Changed how the temple is rendered so I can have text before the variable
${RouterLink('/experiences/day5', 'Day 5')}
${RouterLink('/experiences/day6', 'Day 6')}
${RouterLink('/experiences/day7', 'Day 7')}
${RouterLink('/experiences/day8-10', 'Day 8 & 10')}
${RouterLink('/experiences/day9', 'Day 9')}
${RouterLink('/experiences/day11', 'Day 11')}
</div>
</div>
`;
}
export const layout = 'default'

21
day11/src/style.css Normal file
View File

@@ -0,0 +1,21 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
background-color: #101010;
color: #FEFEFE;
font-family: Helvetica, Arial, Sans-Serif;
padding: 0;
margin: 0;
min-height: 100vh;
}
a:hover {
text-decoration: underline;
}
.container__content {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

1
day11/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

17
day11/tailwind.config.cjs Normal file
View File

@@ -0,0 +1,17 @@
/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors')
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
gray: colors.zinc
}
},
},
plugins: [],
}

23
day11/tsconfig.json Normal file
View File

@@ -0,0 +1,23 @@
{
"compilerOptions": {
"outDir": "./dist",
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ESNext", "DOM"],
"moduleResolution": "Node",
"strict": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"skipLibCheck": true
},
"exclude":[
"./node_modules"
]
}

11
day11/vite.config.js Normal file
View File

@@ -0,0 +1,11 @@
/** @type {import('vite').UserConfig} */
export default {
build: {
target: 'es2020',
},
server: {
port: 3000,
host: '0.0.0.0'
}
}