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

add day 5

Browse Source
This commit is contained in:
Zoe
2022-09-27 21:41:37 -05:00
parent 213b42bb9c
commit 2040570ea2
19 changed files with 2565 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
day5/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"><noscript>You need javascript to run this app</noscript></div>
</body>
</html>

2198
day5/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day5/package.json Normal file
View File

@@ -0,0 +1,17 @@
{
"name": "day1",
"type": "module",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"autoprefixer": "^10.4.12",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8",
"vite": "^3.1.3"
}
}

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

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

22
day5/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: {count}</h2>
</div>
<div class="flex justify-center">
<button d-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-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-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>
`
}

23
day5/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 {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
day5/src/components/routerLink.ts Normal file
View File

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

10
day5/src/components/textInput.ts Normal file
View File

@@ -0,0 +1,10 @@
export const TextInput = () => {
return `
<div class="mb-2">
<h2 class="text-xl font-semibold text-center">Input is: {text}</h2>
</div>
<div class="flex justify-center">
<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>
`
}

1
day5/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
day5/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
day5/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

38
day5/src/lib/ReactiveObject.js Normal file
View File

@@ -0,0 +1,38 @@
export class Reactive {
constructor(obj) {
this.contents = obj;
this.listeners = {};
this.makeReactive(obj);
}
makeReactive(obj) {
Object.keys(obj).forEach(prop => this.makePropReactive(obj, prop));
}
makePropReactive(obj, key) {
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, handler) {
if (!this.listeners[prop]) this.listeners[prop] = [];
this.listeners[prop].push(handler);
}
notify(prop) {
this.listeners[prop].forEach(listener => listener(this.contents[prop]));
}
}

44
day5/src/lib/templateRenderer.js Normal file
View File

@@ -0,0 +1,44 @@
export const compileToString = (template) => {
const ast = parse(template);
let fnStr = `\`\``;
ast.map(t => {
// checking to see if it is an interpolation
if (t.startsWith("{") && t.endsWith("}")) {
// so first we calculate the hex value of the variable, which is needed so we can use reactivity properly
// then after that we append a span element with the data-token-<hex value> attribute to the span
// finally we add the appState.contents.variables to the string so we have the value of the variable in the raw html.
const uuid = t.split(/{|}/).filter(Boolean)[0].trim().split("").map(c => c.charCodeAt(0).toString(16).padStart(2, "0")).join("");
fnStr = fnStr.substring(0, fnStr.length - 1) + `<span data-token-${uuid}>\``;
fnStr += `+appState.contents.${t.split(/{|}/).filter(Boolean)[0].trim()}` + `+\`</span>\``;
} else {
// append the string to the fnStr
fnStr += `+\`${t}\``;
}
});
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) => {
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;
}

93
day5/src/main.ts Normal file
View File

@@ -0,0 +1,93 @@
import { Reactive } from './lib/ReactiveObject'
import { compileToString } from './lib/templateRenderer'
import '/src/style.css';
const documentBody = document.getElementById('app')
const appState = new Reactive({
count: 0,
text: '',
year: ''
});
// Global function to handle rendering a page and navigation
async function loadPage(route?: string) {
let templatedVirtualDom
let fileName: any = window.location.pathname.split('/');
if (!documentBody) {
throw new Error
}
if (fileName[1] === '') {
fileName = '/index'
} else {
fileName = fileName.join('/').toLowerCase().trim()
}
if (route) {
// we assume the user is navigating to another page so we change the windows path to the give route
// then we dynamically import the page from the pages directory and then we change the templatedVirtualDom
// to the new files content
history.pushState('', '', route)
fileName = window.location.pathname.split('/');
if (fileName[1] === '') {
fileName = '/index'
} else {
fileName = fileName.join('/').toLowerCase().trim()
}
const file = await import(/* @vite-ignore */ './pages' + fileName)
templatedVirtualDom = await eval(compileToString(eval(file.default)()));
} else {
const file = await import(/* @vite-ignore */ './pages' + fileName)
templatedVirtualDom = await eval(compileToString(eval(file.default)()))
}
documentBody.innerHTML = templatedVirtualDom
// here we hydrate/re-hydrate the page content
await hydratePage()
}
// function to turn the template into reactive content "hydating" a page
async function hydratePage() {
if (!documentBody) {
throw new Error
}
// 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 querySelector = "data-token-" + e.split("").map(c => c.charCodeAt(0).toString(16).padStart(2, "0")).join("")
const listeningElements = document.querySelectorAll(`[${querySelector}]`)
listeningElements.forEach((elm) => {
appState.listen(e, (change) => elm.textContent = change);
})
})
// here we look for elements with the d-click attribute and on click run the function in the attribute
let elms = documentBody.querySelectorAll('*[d-click]')
elms.forEach((e) => {
const clickFunction = e.getAttribute("d-click")
if (!clickFunction) return;
e.addEventListener('click', () => {
eval(clickFunction)
})
})
// 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('*[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
})
})
}
// equivalent to mounted() on svelte or vue
window.addEventListener('load', async () => {
// loadPage after all the index is loaded
await loadPage()
window.onpopstate = async () => {
await loadPage()
}
})

23
day5/src/pages/index.ts Normal file
View File

@@ -0,0 +1,23 @@
import { Counter } from '/src/components/counter';
import { TextInput } from '/src/components/textInput';
import { MyDad } from '/src/components/myDad';
import { RouterLink } from '/src/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">
${Counter()}
<br/>
${TextInput()}
<br/>
${MyDad()}
<br/>
<div class="flex gap-1 justify-center">
Go to ${RouterLink('/page2', 'Page 2')}
</div>
</div>
</div>
`
}

19
day5/src/pages/page2.ts Normal file
View File

@@ -0,0 +1,19 @@
import { Counter } from '/src/components/counter';
import { TextInput } from '/src/components/textInput';
import { RouterLink } from '/src/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">
${Counter()}
<br/>
${TextInput()}
<br/>
<div class="flex gap-1 justify-center">
Go to ${RouterLink('/subroute/page', 'subroute page')}
</div>
</div>
</div>
`
}

15
day5/src/pages/subroute/page.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Counter } from '/src/components/counter';
import { RouterLink } from '/src/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">
${Counter()}
<div class="flex gap-1 justify-center">
reutrn ${RouterLink('/', 'Home')}
</div>
</div>
</div>
`
}

18
day5/src/style.css Normal file
View File

@@ -0,0 +1,18 @@
@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;
scrollbar-color: #27272a #27272a;
}
.container__content {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

11
day5/tailwind.config.cjs Normal file
View File

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