diff --git a/README.md b/README.md index 0f57702..af383c5 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ -# HTML-CSS-JavaScript-projects-for-beginners - -This is the source code of the YouTube video (10 projects) https://www.youtube.com/watch?v=ePzOFu2xXUQ. - -Part 2 (16 projects) : https://youtu.be/EWv2jnhZErc - -NEW HTML CSS JavaScript Projects Interesting HTML CSS JavaScript projects Learn HTML, CSS, and JavaScript 2021 to create modern websites. Fun learning HTML, CSS, and JavaScript! - -I'm Sahand, a web developer in computer science. I've been doing this for over a decade. This course was created to share my knowledge and experience with you. Build simple websites using HTML, CSS, and JavaScript. Responsive web design employs HTML, CSS, and JavaScript. This is a skill you'll learn in this course. This new course teaches students how to install Visual Studio Code and its extensions. Then we start from scratch with each project. After finishing HTML, it's on to CSS and JavaScript. Building in HTML, CSS, or JavaScript is fine. This guide explains HTML, CSS, and JavaScript syntax. - -Every project is started from scratch and finished without using copied code. Then they are used on the project to ensure everyone understands. This program's exciting project-based curriculum includes building modern, super cool, and responsive websites! Let's get started learning HTML, CSS, and JavaScript. - -Contact me if you have any questions through my twitter: @codewithsahand. +# HTML CSS JavaScript Projects + +This is the source code of the website: 100 HTML CSS JavaScript Projects +
+ Visit 100jsprojects.com to preview the projects. + +
+
+

About

+

Hi there! I'm Sahand, a web developer with over a decade of experience. This course, "HTML CSS JavaScript Projects," was created to share my knowledge and experience with you. In this course, you'll learn how to build simple, responsive websites using HTML, CSS, and JavaScript.

+

In this course, you'll learn how to install Visual Studio Code and its extensions, and then we'll start from scratch with each project. After finishing HTML, we'll move on to CSS and JavaScript. Building in HTML, CSS, or JavaScript is fine, and this guide will explain HTML, CSS, and JavaScript syntax.

+

Each project in this course is started from scratch and finished without using copied code. Then, we'll go over the code together to ensure that everyone understands. This program's exciting project-based curriculum includes building modern, super cool, and responsive websites!

+

If you have any questions, please feel free to contact me through my email: codewithsahand@gmail.com

+ Visit my website +
diff --git a/projects/Navbar-project/index.html b/projects/Navbar-project/index.html deleted file mode 100644 index 4975da5..0000000 --- a/projects/Navbar-project/index.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - Sahand Ghavidel - - - - - - - - \ No newline at end of file diff --git a/projects/age-calculator/index.html b/projects/age-calculator/index.html new file mode 100644 index 0000000..7ef5c27 --- /dev/null +++ b/projects/age-calculator/index.html @@ -0,0 +1,23 @@ + + + + + + + Age Calculator + + + +
+

Age Calculator

+
+ + + +

Your age is 21 years old

+
+
+ + + + \ No newline at end of file diff --git a/projects/age-calculator/index.js b/projects/age-calculator/index.js new file mode 100644 index 0000000..b2888ee --- /dev/null +++ b/projects/age-calculator/index.js @@ -0,0 +1,31 @@ +const btnEl = document.getElementById("btn"); +const birthdayEl = document.getElementById("birthday"); +const resultEl = document.getElementById("result"); + +function calculateAge() { + const birthdayValue = birthdayEl.value; + if (birthdayValue === "") { + alert("Please enter your birthday"); + } else { + const age = getAge(birthdayValue); + resultEl.innerText = `Your age is ${age} ${age > 1 ? "years" : "year"} old`; + } +} + +function getAge(birthdayValue) { + const currentDate = new Date(); + const birthdayDate = new Date(birthdayValue); + let age = currentDate.getFullYear() - birthdayDate.getFullYear(); + const month = currentDate.getMonth() - birthdayDate.getMonth(); + + if ( + month < 0 || + (month === 0 && currentDate.getDate() < birthdayDate.getDate()) + ) { + age--; + } + + return age; +} + +btnEl.addEventListener("click", calculateAge); diff --git a/projects/age-calculator/style.css b/projects/age-calculator/style.css new file mode 100644 index 0000000..0229675 --- /dev/null +++ b/projects/age-calculator/style.css @@ -0,0 +1,63 @@ +body { + margin: 0; + padding: 20px; + font-family: "Montserrat", sans-serif; + background-color: #f7f7f7; +} + +.container { + background-color: white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + padding: 20px; + max-width: 600px; + margin: 0 auto; + border-radius: 5px; + margin-top: 50px; +} + +h1 { + font-size: 36px; + text-align: center; + margin-top: 0; + margin-bottom: 20px; +} + +.form { + display: flex; + flex-direction: column; + align-items: center; +} + +label { + font-weight: bold; + margin-bottom: 10px; +} + +input { + padding: 8px; + border: 1px solid #ccc; + border-radius: 5px; + width: 100%; + max-width: 300px; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + margin-top: 10px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #0062cc; +} + +#result { + margin-top: 20px; + font-size: 24px; + font-weight: bold; +} diff --git a/projects/background-video-project/background-video.mp4 b/projects/background-video/background-video.mp4 similarity index 100% rename from projects/background-video-project/background-video.mp4 rename to projects/background-video/background-video.mp4 diff --git a/projects/background-video-project/index.html b/projects/background-video/index.html similarity index 100% rename from projects/background-video-project/index.html rename to projects/background-video/index.html diff --git a/projects/background-video-project/index.js b/projects/background-video/index.js similarity index 100% rename from projects/background-video-project/index.js rename to projects/background-video/index.js diff --git a/projects/background-video-project/preloader.gif b/projects/background-video/preloader.gif similarity index 100% rename from projects/background-video-project/preloader.gif rename to projects/background-video/preloader.gif diff --git a/projects/background-video-project/styles.css b/projects/background-video/styles.css similarity index 100% rename from projects/background-video-project/styles.css rename to projects/background-video/styles.css diff --git a/projects/basic-calculator/index.html b/projects/basic-calculator/index.html new file mode 100644 index 0000000..432ea60 --- /dev/null +++ b/projects/basic-calculator/index.html @@ -0,0 +1,35 @@ + + + + + + + Basic Calculator + + + +
+ +
+ + + + + + + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/projects/basic-calculator/index.js b/projects/basic-calculator/index.js new file mode 100644 index 0000000..40fa6e8 --- /dev/null +++ b/projects/basic-calculator/index.js @@ -0,0 +1,29 @@ +const buttonsEl = document.querySelectorAll("button"); + +const inputFieldEl = document.getElementById("result"); + +for (let i = 0; i < buttonsEl.length; i++) { + buttonsEl[i].addEventListener("click", () => { + const buttonValue = buttonsEl[i].textContent; + if (buttonValue === "C") { + clearResult(); + } else if (buttonValue === "=") { + calculateResult(); + } else { + appendValue(buttonValue); + } + }); +} + +function clearResult() { + inputFieldEl.value = ""; +} + +function calculateResult() { + inputFieldEl.value = eval(inputFieldEl.value); +} + +function appendValue(buttonValue) { + inputFieldEl.value += buttonValue; + // inputFieldEl.value = inputFieldEl.value + buttonValue; +} diff --git a/projects/basic-calculator/style.css b/projects/basic-calculator/style.css new file mode 100644 index 0000000..baf4abd --- /dev/null +++ b/projects/basic-calculator/style.css @@ -0,0 +1,68 @@ +* { + box-sizing: border-box; + margin: 0; +} + +.calculator { + background-color: #f2f2f2; + padding: 20px; + max-width: 400px; + margin: 0 auto; + border: solid 1px #ccc; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); + border-radius: 5px; + margin-top: 40px; +} + +#result{ + width: 100%; + padding: 10px; + font-size: 24px; + border: none; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) inset; + border-radius: 5px; +} + +.buttons{ + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 10px; + margin-top: 20px; +} + +button{ + padding: 10px; + font-size: 24px; + border: none; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + +} + +button:hover{ + background-color: #ddd; +} + +.clear{ + background-color: #ff4136; + color: #fff; +} + +.number, .decimal{ + background-color: #fff; + color: #333; + +} + +.operator{ + background-color: #0074d9; + color: #fff; +} + +.equals{ + background-color: #01ff70; + grid-row: span 3; + color: #fff; +} \ No newline at end of file diff --git a/projects/bmi-calculator/index.html b/projects/bmi-calculator/index.html index 77c1be9..fd167fe 100644 --- a/projects/bmi-calculator/index.html +++ b/projects/bmi-calculator/index.html @@ -4,31 +4,20 @@ - - BMI - + BMI Calculator + -
-

Body Mass Index Calculator using Metric Units

- Your Height: -
- Your Weight: -
-
- Your BMI: -

+
+

Body Mass Index (BMI) Calculator

+ Your Height (cm): + + Your Weight (kg): + + + +

Weight Condition:

- + - - - \ No newline at end of file + \ No newline at end of file diff --git a/projects/bmi-calculator/index.js b/projects/bmi-calculator/index.js new file mode 100644 index 0000000..b798ee0 --- /dev/null +++ b/projects/bmi-calculator/index.js @@ -0,0 +1,24 @@ +const btnEl = document.getElementById("btn"); +const bmiInputEl = document.getElementById("bmi-result"); +const weightConditionEl = document.getElementById("weight-condition"); + +function calculateBMI() { + const heightValue = document.getElementById("height").value / 100; + const weightValue = document.getElementById("weight").value; + + const bmiValue = weightValue / (heightValue * heightValue); + + bmiInputEl.value = bmiValue; + + if (bmiValue < 18.5) { + weightConditionEl.innerText = "Under weight"; + } else if (bmiValue >= 18.5 && bmiValue <= 24.9) { + weightConditionEl.innerText = "Normal weight"; + } else if (bmiValue >= 25 && bmiValue <= 29.9) { + weightConditionEl.innerText = "Overweight"; + } else if (bmiValue >= 30) { + weightConditionEl.innerText = "Obesity"; + } +} + +btnEl.addEventListener("click", calculateBMI); diff --git a/projects/bmi-calculator/script.js b/projects/bmi-calculator/script.js deleted file mode 100644 index 1fdba94..0000000 --- a/projects/bmi-calculator/script.js +++ /dev/null @@ -1,24 +0,0 @@ -function fun() - { - var cm = document.getElementById("cm").value ; - cm = cm/100; - var w = document.getElementById("weight").value; - var bmi = w/(cm*cm); - document.getElementById("bmi").value = bmi; - if(bmi<18.5) - { - document.querySelector("h4").innerHTML = 'Under weight'; - } - else if(bmi>=18.5 && bmi <=24.9) - { - document.querySelector("h4").innerHTML = 'Normal weight'; - } - else if(bmi>=25 && bmi <= 29.9) - { - document.querySelector("h4").innerHTML = 'Overweight'; - } - else if(bmi>=30) - { - document.querySelector("h4").innerHTML = 'Obesity'; - } - } \ No newline at end of file diff --git a/projects/bmi-calculator/style.css b/projects/bmi-calculator/style.css new file mode 100644 index 0000000..7d94328 --- /dev/null +++ b/projects/bmi-calculator/style.css @@ -0,0 +1,52 @@ +body{ + margin: 0; + background: linear-gradient(to left bottom, lightgreen, lightblue); + display: flex; + min-height: 100vh; + justify-content: center; + align-items: center; + font-family: 'Courier New', Courier, monospace; +} + +.container{ + background: rgba(255,255,255, .3); + padding: 20px; + display: flex; + flex-direction: column; + border-radius: 5px; + box-shadow: 0 10px 10px rgba(0,0,0,.3); + margin: 5px; +} + +.heading{ + font-size: 30px; +} + +.input{ + padding: 10px 20px; + font-size: 18px; + background: rgba(255,255,255, .4); + border-color: rgba(255,255,255, .5); + margin: 10px; +} + +.btn{ + background-color: lightgreen; + border: none; + padding: 10px 20px; + border-radius: 5px; + margin: 10px; + font-size: 20px; + box-shadow: 0 0 4px rgba(0,0,0,.3); + cursor: pointer; +} + +.btn:hover{ + box-shadow: 0 0 8px rgba(0,0,0,.3); + transition: all 300ms ease; +} + +.info-text{ + font-size: 20px; + font-weight: 500; +} \ No newline at end of file diff --git a/projects/dad-jokes-generator/index.html b/projects/dad-jokes-generator/index.html new file mode 100644 index 0000000..8693912 --- /dev/null +++ b/projects/dad-jokes-generator/index.html @@ -0,0 +1,18 @@ + + + + + + + Dad Jokes Generator + + + +
+

Dad Joke Generator

+

Dad Joke

+ +
+ + + \ No newline at end of file diff --git a/projects/dad-jokes-generator/index.js b/projects/dad-jokes-generator/index.js new file mode 100644 index 0000000..12d9337 --- /dev/null +++ b/projects/dad-jokes-generator/index.js @@ -0,0 +1,36 @@ +const btnEl = document.getElementById("btn"); +const jokeEl = document.getElementById("joke"); + +const apiKey = "4kqGcJx8uDXo3XIskcbzokAz7rN8nWJs3PL9Mcll"; + +const options = { + method: "GET", + headers: { + "X-Api-Key": apiKey, + }, +}; + +const apiURL = "https://api.api-ninjas.com/v1/dadjokes?limit=1"; + +async function getJoke() { + try { + jokeEl.innerText = "Updating..."; + btnEl.disabled = true; + btnEl.innerText = "Loading..."; + const response = await fetch(apiURL, options); + const data = await response.json(); + + btnEl.disabled = false; + btnEl.innerText = "Tell me a joke"; + + jokeEl.innerText = data[0].joke; + } catch (error) { + jokeEl.innerText = "An error happened, try again later"; + btnEl.disabled = false; + btnEl.innerText = "Tell me a joke"; + console.log(error); + } +} + +btnEl.addEventListener("click", getJoke); + diff --git a/projects/dad-jokes-generator/style.css b/projects/dad-jokes-generator/style.css new file mode 100644 index 0000000..1b55a53 --- /dev/null +++ b/projects/dad-jokes-generator/style.css @@ -0,0 +1,52 @@ +body{ + margin: 0; + background: linear-gradient(to left bottom, lightblue, lightpink, lightblue); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + font-family: monospace; +} + +.container{ + background-color: rgba(255,255,255,.3); + padding: 20px; + box-shadow: 0 6px 10px rgba(0,0,0,.3); + border-radius: 15px; + width: 85%; + text-align: center; + color: darkgreen; +} + +.heading{ + font-size: 35px; + font-weight: 200; + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + text-shadow: 5px 5px 2px rgba(0,0,0,.3); + letter-spacing: 2px; +} + +.joke{ + font-size: 25px; + font-weight: 500; + margin: 40px +} + +.btn{ + font-size: 18px; + font-weight: 700; + border-radius: 5px; + cursor: pointer; + padding: 10px; + background-color: rgba(255,255,255,.3); + border-color: rgba(255,255,255,.6); + text-transform: uppercase; + width: 300px; + color: darkgreen; +} + +.btn:hover{ + background-color: rgba(255,255,255,.5); + box-shadow: 0 4px 4px rgba(0,0,0,.3); + transition: all 300ms ease; +} \ No newline at end of file diff --git a/projects/dice-roll-simulator/index.html b/projects/dice-roll-simulator/index.html new file mode 100644 index 0000000..edf81b5 --- /dev/null +++ b/projects/dice-roll-simulator/index.html @@ -0,0 +1,20 @@ + + + + + + + Dice Roll Simulator + + + +

Dice Roll Simulator

+
⚄
+ + + + + diff --git a/projects/dice-roll-simulator/index.js b/projects/dice-roll-simulator/index.js new file mode 100644 index 0000000..8deecde --- /dev/null +++ b/projects/dice-roll-simulator/index.js @@ -0,0 +1,53 @@ +const buttonEl = document.getElementById("roll-button"); + +const diceEl = document.getElementById("dice"); + +const rollHistoryEl = document.getElementById("roll-history"); + +let historyList = []; + +function rollDice() { + const rollResult = Math.floor(Math.random() * 6) + 1; + const diceFace = getDiceFace(rollResult); + diceEl.innerHTML = diceFace; + historyList.push(rollResult); + updateRollHistory(); +} + +function updateRollHistory() { + rollHistoryEl.innerHTML = ""; + for (let i = 0; i < historyList.length; i++) { + const listItem = document.createElement("li"); + listItem.innerHTML = `Roll ${i + 1}: ${getDiceFace( + historyList[i] + )}`; + rollHistoryEl.appendChild(listItem); + } +} + +function getDiceFace(rollResult) { + switch (rollResult) { + case 1: + return "⚀"; + case 2: + return "⚁"; + case 3: + return "⚂"; + case 4: + return "⚃"; + case 5: + return "⚄"; + case 6: + return "⚅"; + default: + return ""; + } +} + +buttonEl.addEventListener("click", () => { + diceEl.classList.add("roll-animation"); + setTimeout(() => { + diceEl.classList.remove("roll-animation"); + rollDice(); + }, 1000); +}); diff --git a/projects/dice-roll-simulator/style.css b/projects/dice-roll-simulator/style.css new file mode 100644 index 0000000..439ab24 --- /dev/null +++ b/projects/dice-roll-simulator/style.css @@ -0,0 +1,70 @@ +body { + font-family: "Open Sans", sans-serif; + text-align: center; + margin: 0; +} + +h1 { + font-size: 3rem; + margin-top: 2rem; +} + +.dice { + font-size: 7rem; + margin: 5px; + animation-duration: 1s; + animation-fill-mode: forwards; +} + +.roll-animation { + animation-name: roll; +} + +@keyframes roll { + 0% { + transform: rotateY(0deg) rotateX(0deg); + } + + 100% { + transform: rotateY(720deg) rotateX(720deg); + } +} + +button { + background-color: #47a5c4; + color: white; + font-size: 1.5rem; + padding: 1rem 2rem; + border: none; + border-radius: 1rem; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #2e8baf; +} + +ul { + list-style: none; + padding: 0; + max-width: 600px; + margin: 2rem auto; +} + +li { + font-size: 1.5rem; + padding: 0.5rem; + margin: 0.5rem; + background-color: #f2f2f2; + border-radius: 0.5rem; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + display: flex; + justify-content: space-between; + align-items: center; +} + +li span { + font-size: 3rem; + margin-right: 1rem; +} diff --git a/projects/double-landing-page/style.css b/projects/double-landing-page/style.css index 5a62c04..0d37d66 100644 --- a/projects/double-landing-page/style.css +++ b/projects/double-landing-page/style.css @@ -11,7 +11,7 @@ body { h1 { font-size: 100px; color: aliceblue; - backdrop-filter: brightness(0.5); + background-color: rgba(0, 0, 0, 0.3); letter-spacing: 4px; } diff --git a/projects/english-dictionary/index.html b/projects/english-dictionary/index.html index d74bf9a..47f6806 100644 --- a/projects/english-dictionary/index.html +++ b/projects/english-dictionary/index.html @@ -1,53 +1,23 @@ - + - - - Dictionary App - + + + + + English Dictionary - - - - -
-
English Dictionary
-
- - - close -
-

Type a word and press enter

- + + +
+

English Dictionary

+ +

Type a word and press enter

+
+

Word Title: ___

+

Meaning: ___

+ +
- - - - \ No newline at end of file + + + diff --git a/projects/english-dictionary/index.js b/projects/english-dictionary/index.js index c092e20..8a93219 100644 --- a/projects/english-dictionary/index.js +++ b/projects/english-dictionary/index.js @@ -1,73 +1,40 @@ -const wrapper = document.querySelector(".wrapper"), -searchInput = wrapper.querySelector("input"), -synonyms = wrapper.querySelector(".synonyms .list"), -infoText = wrapper.querySelector(".info-text"), -volumeIcon = wrapper.querySelector(".word i"), -removeIcon = wrapper.querySelector(".search span"); -let audio; - - -function data(result, word) { - if (result.title){ - infoText.innerHTML = `Can't find the meaning of "${word}".Please try to search for another - word`; - } - else { - console.log(result); - wrapper.classList.add("active"); - let definitions = result[0].meanings[0].definitions[0], - phonetics = `${result[0].meanings[0].partOfSpeech} / ${result[0].phonetics[0].text} / `; - - document.querySelector('.word p').innerText = result[0].word; - document.querySelector('.word span').innerText = phonetics; - document.querySelector('.meaning span').innerText = definitions.definition; - document.querySelector('.example span').innerText = definitions.example; - audio = new Audio('https:' + result[0].phonetics[0].audio); - - if(definitions.synonyms[0] == undefined){ - synonyms.parentElement.style.display = 'none'; - } - else { - synonyms.parentElement.style.display = 'block'; - synonyms.innerHTML = ""; - for( let i =0; i < 5; i++) { - let tag = `${definitions.synonyms[i]},`; - synonyms.insertAdjacentHTML('beforeend', tag); - } - } +const inputEl = document.getElementById("input"); +const infoTextEl = document.getElementById("info-text"); +const meaningContainerEl = document.getElementById("meaning-container"); +const titleEl = document.getElementById("title"); +const meaningEl = document.getElementById("meaning"); +const audioEl = document.getElementById("audio"); + +async function fetchAPI(word) { + try { + infoTextEl.style.display = "block"; + meaningContainerEl.style.display = "none"; + infoTextEl.innerText = `Searching the meaning of "${word}"`; + const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`; + const result = await fetch(url).then((res) => res.json()); + + if (result.title) { + meaningContainerEl.style.display = "block"; + infoTextEl.style.display = "none"; + titleEl.innerText = word; + meaningEl.innerText = "N/A"; + audioEl.style.display = "none"; + } else { + infoTextEl.style.display = "none"; + meaningContainerEl.style.display = "block"; + audioEl.style.display = "inline-flex"; + titleEl.innerText = result[0].word; + meaningEl.innerText = result[0].meanings[0].definitions[0].definition; + audioEl.src = result[0].phonetics[0].audio; } + } catch (error) { + console.log(error); + infoTextEl.innerText = `an error happened, try again later`; + } } -function search (word){ - searchInput.value = word; - fetchApi(word); -} - -function fetchApi(word) { - wrapper.classList.remove('active'); - infoText.style.color = '#000'; - infoText.innerHTML = `Searching the meaning of"${word}"`; - let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`; - // fetching api response and returning it with parsing into js obj - //method calling data with passing api response - fetch(url).then(res => res.json()).then(result => data(result, word)); -} - - -searchInput.addEventListener('keyup', e => { - if(e.key === 'Enter' && e.target.value){ - fetchApi(e.target.value); - } -}); - -volumeIcon.addEventListener('click', () => { - audio.play(); +inputEl.addEventListener("keyup", (e) => { + if (e.target.value && e.key === "Enter") { + fetchAPI(e.target.value); + } }); - -removeIcon.addEventListener('click', () => { - searchInput.value = ""; - searchInput.focus(); - wrapper.classList.remove("active"); - infoText.style.color = '#9a9a9a'; - infoText.innerHTML= "Type a word and press enter"; -}); \ No newline at end of file diff --git a/projects/english-dictionary/style.css b/projects/english-dictionary/style.css index 39c1ecc..59fa822 100644 --- a/projects/english-dictionary/style.css +++ b/projects/english-dictionary/style.css @@ -1,153 +1,40 @@ -*{ +body{ margin: 0; - padding: 0; - box-sizing: border-box; - font-family: sans-serif; -} -body { display: flex; - align-items: center; - justify-content: center; - background-color: rgb(160, 158, 156); min-height: 100vh; + justify-content: center; + align-items: center; + background-color: salmon; + font-family: 'Courier New', Courier, monospace; } -.wrapper { - width: 420px; - background-color: #fff; +.container{ + background-color: rgba(255,255,255, .3); + padding: 28px; border-radius: 7px; - padding: 28px 28px; -} -.wrapper header { - font-size: 28px; - font-weight: 500; + box-shadow: 0 10px 10px rgba(0,0,0,.3); + width: 90%; + margin: 10px; + max-width: 450px; text-align: center; + font-size: 18px; + font-weight: 500; } -.wrapper .search { - margin: 35px 0 18px; - position: relative; + +.heading{ + font-size: 28px; } -.search input { + +.input{ height: 53px; - width: 100%; - outline: none; - border: 1px solid #999; - border-radius: 5px; + width: 300px; + background-color: rgba(255,255,255, .6); + border-color: rgba(255,255,255, .4); font-size: 16px; padding: 0 42px; + border-radius: 5px; } -.search :where(i, span) { - position: absolute; - top: 50%; - color: #999; - transform: translateY(-50%); -} -.search input::placeholder{ - color: #b8b8b8; -} -.search input:focus{ - border: 2px solid #4d59fb; - padding: 0 41px; -} -.search i { - left: 18px; - font-size: 16px; - pointer-events: none; -} -.search input:focus ~ i { - color: #4d59fb; -} -.search span { - right: 15px; - cursor: pointer; - font-size: 18px; - display: none; -} -.search input:valid ~ span { - display: block; -} -.wrapper ul li{ - display: flex; - margin-bottom: 14px; - padding-bottom: 17px; - border-bottom: 1px solid #ccc; - justify-content: space-between; - align-items: center; -} -ul .word p{ - font-size: 22px; - font-weight: 500; -} -.wrapper .info-text { - font-size: 13px; - color: #9a9a9a; - margin: -3px 0 -10px; -} -.wrapper ul { - height: 0; - opacity: 0; - overflow: hidden; - transition: all 0.3s ease; -} -ul .word i { - cursor: pointer; - font-size: 15px; - color: #999; -} -ul li:last-child{ - margin-bottom: 0px; - padding-bottom: 0px; - border-bottom: 0px; -} -.content li .details{ - border-left: 3px solid #4d59fb; - border-radius: 4px 0 0 4px; - padding-left: 10px; -} -.content li .details p { - font-size: 17px; - color: #7e7e7e; -} -.synonyms .details .list { - display: flex; - flex-wrap: wrap; -} -.synonyms .details .list span { - margin-right: 5px; - text-decoration: underline; - cursor: pointer; -} -.info-text span{ - font-weight: 500; -} -.wrapper.active ul { - height: 303px; - opacity: 1; -} -.wrapper.active ul{ - display: block; -} -.wrapper.active .info-text { - display: none; -} -ul .content { - max-height: 215px; - overflow-y: auto; -} -ul .content::-webkit-scrollbar{ - width: 0px; -} - - - - - - - - - - - - - +.meaning-container{ + display: none; +} \ No newline at end of file diff --git a/projects/feedback-ui/assets/review.png b/projects/feedback-ui/assets/review.png deleted file mode 100644 index 1210221..0000000 Binary files a/projects/feedback-ui/assets/review.png and /dev/null differ diff --git a/projects/feedback-ui/font/sans.ttf b/projects/feedback-ui/font/sans.ttf deleted file mode 100644 index 85860e6..0000000 Binary files a/projects/feedback-ui/font/sans.ttf and /dev/null differ diff --git a/projects/feedback-ui/index.html b/projects/feedback-ui/index.html index bf8cda1..3101d24 100644 --- a/projects/feedback-ui/index.html +++ b/projects/feedback-ui/index.html @@ -2,47 +2,30 @@ + - - Feedback UI + - -

Feedback Design UI

-
-

- How satisfied are you with our
- customer support performance? -

-
+
+

Feedback UI

+
- + Unhappy
-
- + Neutral
-
- + Satisfied
- +
- - + diff --git a/projects/feedback-ui/index.js b/projects/feedback-ui/index.js new file mode 100644 index 0000000..5bf81a0 --- /dev/null +++ b/projects/feedback-ui/index.js @@ -0,0 +1,34 @@ +const ratingEls = document.querySelectorAll(".rating"); +const btnEl = document.getElementById("btn"); + +const containerEl = document.getElementById("container"); + +let selectedRating = ""; + +ratingEls.forEach((ratingEl) => { + ratingEl.addEventListener("click", (event) => { + removeActive(); + selectedRating = + event.target.innerText || event.target.parentNode.innerText; + event.target.classList.add("active"); + event.target.parentNode.classList.add("active"); + }); +}); + +btnEl.addEventListener("click", () => { + if (selectedRating !== "") { + containerEl.innerHTML = ` + Thank you! +
+
+ Feedback: ${selectedRating} +

We'll use your feedback to improve our customer support.

+ `; + } +}); + +function removeActive() { + ratingEls.forEach((ratingEl) => { + ratingEl.classList.remove("active"); + }); +} diff --git a/projects/feedback-ui/script.js b/projects/feedback-ui/script.js deleted file mode 100644 index 60bfd0f..0000000 --- a/projects/feedback-ui/script.js +++ /dev/null @@ -1,29 +0,0 @@ -const ratings = document.querySelectorAll(".rating"); -const ratingsContainer = document.querySelector(".ratings-container"); -const sendBtn = document.querySelector("#send"); -const panel = document.querySelector("#panel"); -let selectedRating = "Unhappy"; - -ratingsContainer.addEventListener("click", (e) => { - console.log(e.target.parentNode.innerText); - removeActive(); - selectedRating = e.target.innerText || e.target.parentNode.innerText; - e.target.parentNode.classList.toggle("active"); - e.target.classList.toggle("active"); -}); - -sendBtn.addEventListener("click", (e) => { - panel.innerHTML = ` - - Thank You! -
- Feedback : ${selectedRating} -

We'll use your feedback to improve our customer support.

- `; -}); - -function removeActive() { - for (let i = 0; i < ratings.length; i++) { - ratings[i].classList.remove("active"); - } -} diff --git a/projects/feedback-ui/style.css b/projects/feedback-ui/style.css index ef76253..7e1c812 100644 --- a/projects/feedback-ui/style.css +++ b/projects/feedback-ui/style.css @@ -1,120 +1,70 @@ -* { - padding: 0; - box-sizing: border-box; - font-family: "sans"; -} - -@font-face { - font-family: "sans"; - src: url(font/sans.ttf); -} - body { - overflow: hidden; - background: #19172e; - color: #fff; + margin: 0; + background-color: lightcyan; + color: darkgreen; display: flex; - align-items: center; - justify-content: center; min-height: 100vh; + justify-content: center; + align-items: center; + font-family: monospace; } -footer, a, h3,small { - color: #fff; -} - -h1 { - color: #fff; - text-align: center; - position: absolute; - left: 0; - right: 0; - top: 0; - padding-top: 10px; -} - -.box { - background: rgba(255, 255, 255, 0.05); - box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1); +.container { + background: rgba(255, 255, 255, 0.3); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); border-radius: 10px; - backdrop-filter: blur(20px); - padding: 1rem; - width: 400px; - text-align: center; -} - -.panel-container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - padding: 30px; + padding: 20px; + width: 85%; max-width: 400px; + text-align: center; + font-size: 20px; } -.panel-container strong { - line-height: 20px; +.heading { + margin: 5px; + font-size: 30px; } .ratings-container { display: flex; - margin: 20px 0; + padding: 20px 0; } .rating { - flex: 1; cursor: pointer; - padding: 20px; + padding: 10px; margin: 10px 5px; } .rating:hover, -.rating.active { - border-radius: 4px; +.rating.active +{ + background: darkseagreen; + border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); - background: salmon; -} - -.rating img { - width: 40px; -} - -.rating small { - display: inline-block; - margin: 10px 0 0; -} - -.rating:hover small, -.rating.active small { - color: green; + color: aliceblue; + transition: all 300ms ease; } .btn { - background-color: #302d2b; - color: #fff; + background-color: darkcyan; + color: aliceblue; border: 0; + margin: 10px; border-radius: 4px; padding: 12px 30px; cursor: pointer; } -.btn:focus { - outline: 0; +.btn:hover { + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); + transition: all 300ms ease; } .btn:active { - transform: scale(0.98); + transform: scale(0.96); } -.fa-heart { - color: red; - font-size: 30px; - margin-bottom: 10px; +.rating img { + width: 40px; } - -footer { - text-align: center; - position: absolute; - bottom: 0; -} \ No newline at end of file diff --git a/projects/image-search-app/index.html b/projects/image-search-app/index.html new file mode 100644 index 0000000..47214ed --- /dev/null +++ b/projects/image-search-app/index.html @@ -0,0 +1,57 @@ + + + + + + + Image Search App + + + +

Image Search App

+
+ + +
+
+ +
+ + + + diff --git a/projects/image-search-app/index.js b/projects/image-search-app/index.js new file mode 100644 index 0000000..87a94e1 --- /dev/null +++ b/projects/image-search-app/index.js @@ -0,0 +1,54 @@ +const accessKey = "RZEIOVfPhS7vMLkFdd2TSKGFBS4o9_FmcV1Nje3FSjw"; + +const formEl = document.querySelector("form"); +const searchInputEl = document.getElementById("search-input"); +const searchResultsEl = document.querySelector(".search-results"); +const showMoreButtonEl = document.getElementById("show-more-button"); + +let inputData = ""; +let page = 1; + +async function searchImages() { + inputData = searchInputEl.value; + const url = `https://api.unsplash.com/search/photos?page=${page}&query=${inputData}&client_id=${accessKey}`; + + const response = await fetch(url); + const data = await response.json(); + if (page === 1) { + searchResultsEl.innerHTML = ""; + } + + const results = data.results; + + results.map((result) => { + const imageWrapper = document.createElement("div"); + imageWrapper.classList.add("search-result"); + const image = document.createElement("img"); + image.src = result.urls.small; + image.alt = result.alt_description; + const imageLink = document.createElement("a"); + imageLink.href = result.links.html; + imageLink.target = "_blank"; + imageLink.textContent = result.alt_description; + + imageWrapper.appendChild(image); + imageWrapper.appendChild(imageLink); + searchResultsEl.appendChild(imageWrapper); + }); + + page++; + + if (page > 1) { + showMoreButtonEl.style.display = "block"; + } +} + +formEl.addEventListener("submit", (event) => { + event.preventDefault(); + page = 1; + searchImages(); +}); + +showMoreButtonEl.addEventListener("click", () => { + searchImages(); +}); diff --git a/projects/image-search-app/style.css b/projects/image-search-app/style.css new file mode 100644 index 0000000..875a68a --- /dev/null +++ b/projects/image-search-app/style.css @@ -0,0 +1,125 @@ +body { + background-color: #f9f9f9; + font-family: Arial, Helvetica, sans-serif; + line-height: 1.6; + margin: 0; +} + +h1 { + font-size: 36px; + font-weight: bold; + text-align: center; + margin-top: 40px; + margin-bottom: 60px; +} + +form { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 60px; +} + +#search-input { + width: 60%; + max-width: 400px; + padding: 10px 20px; + border: none; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + border-radius: 5px; + font-size: 18px; + color: #333; +} + +#search-button { + padding: 10px 20px; + background-color: #4caf50; + color: white; + border: none; + font-size: 18px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + cursor: pointer; + border-radius: 5px; + transition: background-color 0.3s ease-in-out; +} + +#search-button:hover { + background-color: #3e8e41; +} + +.search-results { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} + +.search-result { + margin-bottom: 60px; + width: 30%; + border-radius: 5px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + overflow: hidden; +} + +.search-result:hover img { + transform: scale(1.05); +} + +.search-result img { + width: 100%; + height: 200px; + object-fit: cover; + transition: transform 0.3s ease-in-out; +} +.search-result a { + padding: 10px; + display: block; + color: #333; + text-decoration: none; + transition: background-color 0.3s ease-in-out; +} + +.search-result:hover a { + background-color: rgba(0, 0, 0, 0.1); +} + +#show-more-button { + background-color: #008cba; + border: none; + color: white; + padding: 10px 20px; + display: block; + margin: 20px auto; + text-align: center; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease-in-out; + display: none; +} + +#show-more-button:hover { + background-color: #0077b5; +} + +@media screen and (max-width: 768px) { + .search-result { + width: 45%; + } +} +@media screen and (max-width: 480px) { + .search-result { + width: 100%; + } + + form { + flex-direction: column; + } + + #search-input { + margin-bottom: 20px; + width: 85%; + } +} diff --git a/projects/music-player/index.html b/projects/music-player/index.html new file mode 100644 index 0000000..20b6976 --- /dev/null +++ b/projects/music-player/index.html @@ -0,0 +1,34 @@ + + + + Music Player + + + +
+

Music Player

+
+ +
+ + +
+
+
+
+
+ +
+ + + diff --git a/projects/music-player/pause.png b/projects/music-player/pause.png new file mode 100644 index 0000000..3c877cc Binary files /dev/null and b/projects/music-player/pause.png differ diff --git a/projects/music-player/play.png b/projects/music-player/play.png new file mode 100644 index 0000000..7019bf1 Binary files /dev/null and b/projects/music-player/play.png differ diff --git a/projects/music-player/script.js b/projects/music-player/script.js new file mode 100644 index 0000000..c037a17 --- /dev/null +++ b/projects/music-player/script.js @@ -0,0 +1,90 @@ +const playlist = [ + { title: "Song 1", src: "songs/song1.m4a" }, + { title: "Song 2", src: "songs/song2.m4a" }, + { title: "Song 3", src: "songs/song3.m4a" }, +]; + +const links = document.querySelectorAll(".playlist__item a"); + +links.forEach((link) => { + link.addEventListener("click", function (e) { + e.preventDefault(); + const source = this.getAttribute("data-src"); + document.querySelector("#player").setAttribute("src", source); + playSong(); + + // Remove active class from all links + links.forEach((link) => { + link.classList.remove("active-song"); + }); + + // Add active class to clicked link + this.classList.add("active-song"); + }); +}); + +function playSong() { + const player = document.querySelector("#player"); + const playButton = document.querySelector(".player__button--play"); + const pauseButton = document.querySelector(".player__button--pause"); + const progressBar = document.querySelector(".player__progress-bar"); + + if (player.paused) { + player.play(); + playButton.classList.remove("active"); + pauseButton.classList.add("active"); + } else { + player.pause(); + playButton.classList.add("active"); + pauseButton.classList.remove("active"); + } + + player.addEventListener("timeupdate", function () { + const progress = (player.currentTime / player.duration) * 100; + progressBar.style.width = `${progress}%`; + }); + + progressBar.addEventListener("click", function (e) { + const progressWidth = this.offsetWidth; + const clickedWidth = e.offsetX; + const percent = (clickedWidth / progressWidth) * 100; + player.currentTime = (player.duration / 100) * percent; + progressBar.style.width = `${percent}%`; + }); +} + +function playFirstSong() { + const firstSong = playlist[0].src; + document.querySelector("#player").setAttribute("src", firstSong); + playSong(); +} + +const playButton = document.querySelector(".player__button--play"); +const pauseButton = document.querySelector(".player__button--pause"); + +playButton.addEventListener("click", function () { + const player = document.querySelector("#player"); + player.play(); + playButton.classList.remove("active"); + pauseButton.classList.add("active"); +}); + +pauseButton.addEventListener("click", function () { + const player = document.querySelector("#player"); + player.pause(); + playButton.classList.add("active"); + pauseButton.classList.remove("active"); +}); + +const player = document.querySelector("#player"); +player.addEventListener("play", function () { + playButton.classList.remove("active"); + pauseButton.classList.add("active"); +}); + +player.addEventListener("pause", function () { + playButton.classList.add("active"); + pauseButton.classList.remove("active"); +}); + +playFirstSong(); diff --git a/projects/music-player/songs/song1.m4a b/projects/music-player/songs/song1.m4a new file mode 100644 index 0000000..90842b1 Binary files /dev/null and b/projects/music-player/songs/song1.m4a differ diff --git a/projects/music-player/songs/song2.m4a b/projects/music-player/songs/song2.m4a new file mode 100644 index 0000000..13c7c3d Binary files /dev/null and b/projects/music-player/songs/song2.m4a differ diff --git a/projects/music-player/songs/song3.m4a b/projects/music-player/songs/song3.m4a new file mode 100644 index 0000000..02ba7a4 Binary files /dev/null and b/projects/music-player/songs/song3.m4a differ diff --git a/projects/music-player/style.css b/projects/music-player/style.css new file mode 100644 index 0000000..038d0b1 --- /dev/null +++ b/projects/music-player/style.css @@ -0,0 +1,90 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; +} + +.container { + max-width: 600px; + margin: 0 auto; + padding: 0 20px; +} + +.title { + text-align: center; + margin-top: 50px; + margin-bottom: 50px; +} + +.player { + margin-bottom: 50px; +} + +.player__controls { + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +.player__button { + width: 50px; + height: 50px; + background-color: #fff; + border: none; + cursor: pointer; + margin-right: 10px; + background-image: url("play.png"); + background-repeat: no-repeat; + background-position: center; + background-size: 60%; +} + +.player__button--pause { + background-image: url("pause.png"); +} + +.player__button.active { + background-color: #0074d9; + color: #fff; +} + +.player__progress { + height: 5px; + background-color: #f5f5f5; + position: relative; +} + +.player__progress-bar { + position: absolute; + top: 0; + left: 0; + height: 100%; + background-color: #0074d9; + width: 0%; +} + +.playlist__item { + margin-bottom: 10px; +} + +.playlist__item a { + display: block; + padding: 10px; + background-color: #fff; + color: #333; + text-decoration: none; +} + +.playlist__item a:hover { + background-color: #f5f5f5; +} + +.playlist__item a.active-song { + background-color: #0074d9; + color: #fff; +} diff --git a/projects/navbar/index.html b/projects/navbar/index.html new file mode 100644 index 0000000..78fd71b --- /dev/null +++ b/projects/navbar/index.html @@ -0,0 +1,38 @@ + + + + + + + Navbar project + + + + + + + + diff --git a/projects/Navbar-project/index.js b/projects/navbar/index.js similarity index 100% rename from projects/Navbar-project/index.js rename to projects/navbar/index.js diff --git a/projects/Navbar-project/logo.svg b/projects/navbar/logo.svg similarity index 100% rename from projects/Navbar-project/logo.svg rename to projects/navbar/logo.svg diff --git a/projects/Navbar-project/styles.css b/projects/navbar/styles.css similarity index 100% rename from projects/Navbar-project/styles.css rename to projects/navbar/styles.css diff --git a/projects/new-year-countdown/index.html b/projects/new-year-countdown/index.html index c4c0578..3638291 100644 --- a/projects/new-year-countdown/index.html +++ b/projects/new-year-countdown/index.html @@ -9,7 +9,7 @@

Countdown to New Year

-
2022
+
2024
00
00
diff --git a/projects/new-year-countdown/index.js b/projects/new-year-countdown/index.js index 1a89f36..3ee8cd0 100644 --- a/projects/new-year-countdown/index.js +++ b/projects/new-year-countdown/index.js @@ -3,7 +3,7 @@ const hourEl = document.getElementById("hour"); const minuteEl = document.getElementById("minute"); const secondEl = document.getElementById("second"); -const newYearTime = new Date("Jan 1, 2022 00:00:00").getTime(); +const newYearTime = new Date("Jan 1, 2024 00:00:00").getTime(); updateCountdown(); diff --git a/projects/note-app/index.html b/projects/note-app/index.html new file mode 100644 index 0000000..f61a1bd --- /dev/null +++ b/projects/note-app/index.html @@ -0,0 +1,25 @@ + + + + + + + Document + + + +

Note App

+

Double click on a note to remove it

+
+ + + +
+ + + diff --git a/projects/note-app/index.js b/projects/note-app/index.js new file mode 100644 index 0000000..c3b33e9 --- /dev/null +++ b/projects/note-app/index.js @@ -0,0 +1,64 @@ +const btnEl = document.getElementById("btn"); +const appEl = document.getElementById("app"); + +getNotes().forEach((note) => { + const noteEl = createNoteEl(note.id, note.content); + appEl.insertBefore(noteEl, btnEl); +}); + +function createNoteEl(id, content) { + const element = document.createElement("textarea"); + element.classList.add("note"); + element.placeholder = "Empty Note"; + element.value = content; + + element.addEventListener("dblclick", () => { + const warning = confirm("Do you want to delete this note?"); + if (warning) { + deleteNote(id, element); + } + }); + + element.addEventListener("input", () => { + updateNote(id, element.value); + }); + + return element; +} + +function deleteNote(id, element) { + const notes = getNotes().filter((note)=>note.id != id) + saveNote(notes) + appEl.removeChild(element) +} + +function updateNote(id, content) { + const notes = getNotes(); + const target = notes.filter((note) => note.id == id)[0]; + target.content = content; + saveNote(notes); +} + +function addNote() { + const notes = getNotes(); + const noteObj = { + id: Math.floor(Math.random() * 100000), + content: "", + }; + const noteEl = createNoteEl(noteObj.id, noteObj.content); + appEl.insertBefore(noteEl, btnEl); + + notes.push(noteObj); + + saveNote(notes); +} + +function saveNote(notes) { + localStorage.setItem("note-app", JSON.stringify(notes)); +} + +function getNotes() { + return JSON.parse(localStorage.getItem("note-app") || "[]"); +} + +btnEl.addEventListener("click", addNote); diff --git a/projects/note-app/style.css b/projects/note-app/style.css new file mode 100644 index 0000000..47154de --- /dev/null +++ b/projects/note-app/style.css @@ -0,0 +1,68 @@ +body { + margin: 0; + background: linear-gradient(to left, lightblue, lightgreen); + font-family: "Courier New", Courier, monospace; +} + +.heading { + color: darkblue; + text-align: center; + padding-top: 10px; + font-size: 35px; +} + +.info-text { + text-align: center; + color: darkblue; + font-size: 18px; +} + +.app { + display: grid; + grid-template-columns: repeat(auto-fill, 300px); + gap: 40px; + justify-content: center; + padding: 50px; +} + +.note { + padding: 17px; + border-radius: 15px; + resize: none; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); + font-size: 18px; + height: 200px; + color: darkblue; + border: none; + outline: none; + background: rgba(255, 255, 255, 0.1); + box-sizing: border-box; +} + +.note::placeholder { + color: gray; + opacity: 30%; +} + +.note:hover, +.note:focus { + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + transition: all 300ms ease; +} + +.btn{ + height: 200px; + border-color: rgba(255, 255, 255, 0.37); + background: rgba(255, 255, 255, 0.27); + border-radius: 15px; + font-size: 70px; + font-weight: 700; + color: rgba(0, 0, 0, 0.3); + cursor: pointer; +} + +.btn:hover{ + background: rgba(255, 255, 255, 0.55); + color: rgba(0, 0, 0, 0.6); + transition: all 300ms ease; +} diff --git a/projects/notes-taking-app/icon.png b/projects/notes-taking-app/icon.png deleted file mode 100644 index 9cac03b..0000000 Binary files a/projects/notes-taking-app/icon.png and /dev/null differ diff --git a/projects/notes-taking-app/index.html b/projects/notes-taking-app/index.html deleted file mode 100644 index 0921e39..0000000 --- a/projects/notes-taking-app/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - Notes Taking App - - - -

Notes Taking App

-
- -
- - - - diff --git a/projects/notes-taking-app/script.js b/projects/notes-taking-app/script.js deleted file mode 100644 index f788999..0000000 --- a/projects/notes-taking-app/script.js +++ /dev/null @@ -1,69 +0,0 @@ -const notesContainer = document.getElementById("app"); -const addNoteButton = notesContainer.querySelector(".add-note"); - -getNotes().forEach(note => { - const noteElement = createNoteElement(note.id, note.content); - notesContainer.insertBefore(noteElement, addNoteButton); -}); - -addNoteButton.addEventListener("click", () => addNote()); - -function getNotes(){ - return JSON.parse(localStorage.getItem("note-ap") || "[]"); -} - -function saveNotes(notes){ - localStorage.setItem("note-ap", JSON.stringify(notes)); -} - -function createNoteElement(id, content){ - const element = document.createElement("textarea"); - - element.classList.add("note"); - element.value = content; - element.placeholder = "Empty Note"; - - element.addEventListener("change", () => { - updateNote(id, element.value); - }); - - element.addEventListener("dblclick", () => { - const noteDelete = confirm("Want to Delete the note?") - if (noteDelete) { - deleteNote(id, element); - } - }); - - return element; -} - -function addNote(){ - const notes = getNotes(); - const noteObj = { - id: Math.floor(Math.random()*100000), - content: "" - }; - - const noteElement = createNoteElement(noteObj.id, noteObj.content); - notesContainer.insertBefore(noteElement, addNoteButton); - - - notes.push(noteObj); - saveNotes(notes); -} - -function updateNote(id, newContent) { - const notes = getNotes(); - const target = notes.filter(note=>note.id == id)[0]; - - target.content = newContent; - saveNotes(notes); -} - -function deleteNote(id, element) { - const notes = getNotes().filter(note => note.id != id); - - saveNotes(notes); - notesContainer.removeChild(element); -} - diff --git a/projects/notes-taking-app/style.css b/projects/notes-taking-app/style.css deleted file mode 100644 index 58a6b31..0000000 --- a/projects/notes-taking-app/style.css +++ /dev/null @@ -1,85 +0,0 @@ -:root { - --bg: #19172e; - --btn: #9c528b; - --card: #b9929f; -} -* { - font-family: sans-serif; - transition: 0.5s ease; -} -body { - margin: 0; - background: var(--bg); -} - -h1 { - color: #fff; - text-align: center; - left: 0; - right: 0; - top: 0; - padding-top: 10px; - font-size: 2rem !important; -} - -#app { - display: grid; - grid-template-columns: repeat(auto-fill, 200px); - padding: 50px; - gap: 40px; -} - -.note { - height: 200px; - box-sizing: border-box; - padding: 17px; - border-radius: 15px; - resize: none; - box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); - font-family: monospace; - font-size: 18px; - color: var(--bg); - font-weight: 800; - border: none; - outline: none; - background: var(--card); -} - -.add-note { - height: 200px; - border: none; - outline: none; - background: rgba(156, 82, 139, 0.27); - border-radius: 15px; - font-size: 70px; - font-weight: 700; - color: rgba(0, 0, 0, 0.5); - cursor: pointer; -} - -.add-note:hover { - background: rgba(156, 82, 139, 0.5); - color: rgba(0, 0, 0, 0.7); -} - -::placeholder { - color: rgb(214, 214, 214); -} - -footer, -a { - color: rgb(214, 214, 214); - font-size: 20px; -} - -footer { - text-align: center; - color: white; - font-size: 1.25rem; - left: 0; - right: 0; - bottom: 0; - margin-bottom: 0; - padding: 10px; - line-height: 4vh; -} \ No newline at end of file diff --git a/projects/pomodoro-timer/index.html b/projects/pomodoro-timer/index.html new file mode 100644 index 0000000..7cfe584 --- /dev/null +++ b/projects/pomodoro-timer/index.html @@ -0,0 +1,22 @@ + + + + + + + Pomodoro Timer + + + +
+

Pomodoro Timer

+

25:00

+
+ + + +
+
+ + + \ No newline at end of file diff --git a/projects/pomodoro-timer/index.js b/projects/pomodoro-timer/index.js new file mode 100644 index 0000000..22b4ede --- /dev/null +++ b/projects/pomodoro-timer/index.js @@ -0,0 +1,42 @@ +const startEl = document.getElementById("start"); +const stopEl = document.getElementById("stop"); +const resetEl = document.getElementById("reset"); +const timerEl = document.getElementById("timer"); + +let interval; +let timeLeft = 1500; + +function updateTimer() { + let minutes = Math.floor(timeLeft / 60); + let seconds = timeLeft % 60; + let formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds + .toString() + .padStart(2, "0")}`; + + timerEl.innerHTML = formattedTime; +} + +function startTimer() { + interval = setInterval(() => { + timeLeft--; + updateTimer(); + if (timeLeft === 0) { + clearInterval(interval); + alert("Time's up!"); + timeLeft = 1500; + updateTimer(); + } + }, 1000); +} +function stopTimer() { + clearInterval(interval); +} +function resetTimer() { + clearInterval(interval); + timeLeft = 1500; + updateTimer(); +} + +startEl.addEventListener("click", startTimer); +stopEl.addEventListener("click", stopTimer); +resetEl.addEventListener("click", resetTimer); diff --git a/projects/pomodoro-timer/style.css b/projects/pomodoro-timer/style.css new file mode 100644 index 0000000..0e6970b --- /dev/null +++ b/projects/pomodoro-timer/style.css @@ -0,0 +1,47 @@ +.container { + margin: 0 auto; + max-width: 400px; + text-align: center; + padding: 20px; + font-family: "Roboto", sans-serif; +} + +.title { + font-size: 36px; + margin-bottom: 10px; + color: #2c3e50; +} + +.timer { + font-size: 72px; + color: #2c3e50; +} + +button { + font-size: 18px; + padding: 10px 20px; + margin: 10px; + color: white; + + border: none; + border-radius: 4px; + cursor: pointer; + text-transform: uppercase; + transition: opacity 0.3s ease-in-out; +} + +button:hover { + opacity: 0.7; +} + +#start { + background-color: #27ae60; +} + +#stop { + background-color: #c0392b; +} + +#reset { + background-color: #7f8c8d; +} diff --git a/projects/project-idea-generator/index.html b/projects/project-idea-generator/index.html deleted file mode 100644 index 5262bbf..0000000 --- a/projects/project-idea-generator/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - Project Idea Generator - - - - - - - - - -

Project Idea Generator

-

- Generate your next coding project
-
- Note: Some projects may be in a specific language but you - can try doing them in a language you like! -

- -
- -

-
- - - - - diff --git a/projects/project-idea-generator/src/css/styles.css b/projects/project-idea-generator/src/css/styles.css deleted file mode 100644 index 2e23832..0000000 --- a/projects/project-idea-generator/src/css/styles.css +++ /dev/null @@ -1,102 +0,0 @@ -* { - box-sizing: border-box; - padding: 10px -} -body { - position: relative; - margin: 0; - padding: 0; - font-family: 'Poppins', sans-serif; - text-align: center; - color: black; - background: #3498DB; -} - -h1 { - display: block; - font-family: 'Poppins', sans-serif; - text-align: center; -} - -h2 { - font-weight: 500; - font-size: 24px; -} - -.fa-code { - font-size: 30px; - font-weight: bolder; - color: white; -} - -h3 { - font-weight: 500; -} - -a { - color: inherit; - text-decoration: underline; -} - -p { - color: white; -} - -.title { - font-weight: 600; - color: white; - font-size: 54px; - padding: 0 16px; -} - -#generate-project { - padding: 15px 40px; - background: none; - border: 3px solid white; - border-radius: 10px; - font-family: 'Poppins', sans-serif; - font-size: 24px; - cursor: pointer; - transition: all 0.3s ease; -} - -#generate-project:hover { - background: white; -} - -#give-idea { - padding: 10px 20px; - background: none; - border: 3px solid white; - border-radius: 10px; - font-family: 'Poppins', sans-serif; - font-size: 16px; - cursor: pointer; - transition: all 0.3s ease; -} - -.fa-github { - font-size: 20px; - font-weight: 600; -} - -#give-idea:hover { - background: white; -} - -#new-project { - margin-top: 20px; - font-size: 44px; -} - -#project-generation { - font-size: 50px; -} - -#project-generation span { - margin-top: 70px; -} - -ul li { - list-style-type: none; -} \ No newline at end of file diff --git a/projects/project-idea-generator/src/js/main.js b/projects/project-idea-generator/src/js/main.js deleted file mode 100644 index 3b8dee5..0000000 --- a/projects/project-idea-generator/src/js/main.js +++ /dev/null @@ -1,15 +0,0 @@ -document.getElementById("generate-project").addEventListener( - "click", - function() { - let project = projects[Math.floor(Math.random() * projects.length)]; - let link = document.getElementById('new-project') - - if (project.link !== "") { - link.innerHTML = ` - ${project.title} - `; - } else { - link.innerHTML = `${project.title}`; - }; - } - ); \ No newline at end of file diff --git a/projects/project-idea-generator/src/js/projects.js b/projects/project-idea-generator/src/js/projects.js deleted file mode 100644 index 4637c82..0000000 --- a/projects/project-idea-generator/src/js/projects.js +++ /dev/null @@ -1,1514 +0,0 @@ -let projects = [ - { - "title": "Build Your Own Text Editor", - "link": "https://viewsourcecode.org/snaptoken/kilo/index.html" - }, - { - "title": "Let's Build a Simple Database", - "link": "https://cstack.github.io/db_tutorial" - }, - { - "title": "Build a spell-checker in Clojure", - "link": "https://bernhardwenzel.com/articles/clojure-spellchecker/" - }, - { - "title": "Build a Twitter Bot in Clojure", - "link": "https://howistart.org/posts/clojure/1/index.html" - }, - { - "title": "Build an Intrpreter", - "link": "https://www.craftinginterpreters.com/" - }, - { - "title": "Write a Shell in C", - "link": "https://brennan.io/2015/01/16/write-a-shell-in-c/" - }, - { - "title": "Build your own Lisp", - "link": "http://www.buildyourownlisp.com/" - }, - { - "title": "Write an OS from scratch", - "link": "https://github.com/tuhdo/os01" - }, - { - "title": "How to create an OS from scratch", - "link": "https://github.com/cfenollosa/os-tutorial" - }, - { - "title": "Building a Simple Chat App With Elixir and Phoenix", - "link": "https://sheharyar.me/blog/simple-chat-phoenix-elixir/" - }, - { - "title": "Write a super fast link shortener with Elixir, Phoenix, and Mnesia", - "link": "https://medium.com/free-code-camp/how-to-write-a-super-fast-link-shortener-with-elixir-phoenix-and-mnesia-70ffa1564b3c" - }, - { - "title": "Write your own Excel in 100 lines of F#", - "link": "http://tomasp.net/blog/2018/write-your-own-excel/" - }, - { - "title": "ChatBus : build your first multi-user chat room app with Erlang/OTP", - "link": "https://medium.com/@kansi/chatbus-build-your-first-multi-user-chat-room-app-with-erlang-otp-b55f72064901" - }, - { - "title": "How to Write a Jupyter Notebook Extension", - "link": "https://towardsdatascience.com/how-to-write-a-jupyter-notebook-extension-a63f9578a38c" - }, - { - "title": "Build a React Native Todo Application", - "link": "https://egghead.io/courses/build-a-react-native-todo-application" - }, - { - "title": "How to build a news app with React Native", - "link": "https://www.freecodecamp.org/news/create-a-news-app-using-react-native-ced249263627/" - }, - { - "title": "Reverse a String", - "link": "" - }, - { - "title": "RSS Feed Creator", - "link": "" - }, - { - "title": "P2P File Sharing App", - "link": "" - }, - { - "title": "Hotel Reservation System", - "link": "" - }, - { - "title": "WYSIWG Editor", - "link": "" - }, - { - "title": "CAPTCHA Maker", - "link": "" - }, - { - "title": "Build the Hangman game", - "link": "" - }, - { - "title": "Build a microblog with Flask", - "link": "https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world" - }, - { - "title": "Mining Twitter Data with Python", - "link": "https://marcobonzanini.com/2015/03/02/mining-twitter-data-with-python-part-1/" - }, - { - "title": "Build a Job Scrapping Web App", - "link": "https://www.freecodecamp.org/news/how-i-built-a-job-scraping-web-app-using-node-js-and-indreed-7fbba124bbdc/" - }, - { - "title": "Create a Character voting app", - "link": "http://sahatyalkabov.com/create-a-character-voting-app-using-react-nodejs-mongodb-and-socketio/" - }, - { - "title": "Build Git from Scratch", - "link": "http://gitlet.maryrosecook.com/docs/gitlet.html" - }, - { - "title": "Build a TCP/IP stack in C", - "link": "https://www.saminiir.com/lets-code-tcp-ip-stack-1-ethernet-arp/" - }, - { - "title": "Build a Network Stack in Ruby", - "link": "https://medium.com/geckoboard-under-the-hood/how-to-build-a-network-stack-in-ruby-f73aeb1b661b" - }, - { - "title": "C++: Introduction to Ray Tracing: a Simple Method for Creating 3D Images", - "link": "https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-ray-tracing/how-does-it-work" - }, - { - "title": "C++: How OpenGL works: software rendering in 500 lines of code", - "link": "https://github.com/ssloy/tinyrenderer/wiki" - }, - { - "title": "C++: Raycasting engine of Wolfenstein 3D", - "link": "http://lodev.org/cgtutor/raycasting.html" - }, - { - "title": "C++: Physically Based Rendering:From Theory To Implementation", - "link": "http://www.pbr-book.org/" - }, - { - "title": "C++: Rasterization: a Practical Implementation", - "link": "https://www.scratchapixel.com/lessons/3d-basic-rendering/rasterization-practical-implementation/overview-rasterization-algorithm" - }, - { - "title": "C# / TypeScript / JavaScript: Learning how to write a 3D soft engine from scratch in C#, TypeScript or JavaScript", - "link": "https://www.davrous.com/2013/06/13/tutorial-series-learning-how-to-write-a-3d-soft-engine-from-scratch-in-c-typescript-or-javascript/" - }, - { - "title": "Java / JavaScript: Build your own 3D renderer", - "link": "https://avik-das.github.io/build-your-own-raytracer/" - }, - { - "title": "Java: How to create your own simple 3D render engine in pure Java", - "link": "http://blog.rogach.org/2015/08/how-to-create-your-own-simple-3d-render.html" - }, - { - "title": "JavaScript / Pseudocode: Computer Graphics from scratch", - "link": "http://www.gabrielgambetta.com/computer-graphics-from-scratch/introduction.html" - }, - { - "title": "Python: A 3D Modeller", - "link": "http://aosabook.org/en/500L/a-3d-modeller.html" - }, - { - "title": "C#: How To: Augmented Reality App Tutorial for Beginners with Vuforia and Unity 3D", - "link": "https://www.youtube.com/watch?v=uXNjNcqW4kY" - }, - { - "title": "C#: How To Unity ARCore", - "link": "https://www.youtube.com/playlist?list=PLKIKuXdn4ZMjuUAtdQfK1vwTZPQn_rgSv" - }, - { - "title": "C#: AR Portal Tutorial with Unity", - "link": "https://www.youtube.com/playlist?list=PLPCqNOwwN794Gz5fzUSi1p4OqLU0HTmvn" - }, - { - "title": "C#: How to create a Dragon in Augmented Reality in Unity ARCore", - "link": "https://fr-film.net/v-how-to-create-a-dragon-in-augmented-reality-in-unity-arcore-tutorial-qTSDPkPyPqs.html" - }, - { - "title": "C#: How to Augmented Reality AR Tutorial: ARKit Portal to the Upside Down", - "link": "https://www.youtube.com/watch?v=Z5AmqMuNi08" - }, - { - "title": "Python: Augmented Reality with Python and OpenCV", - "link": "https://bitesofcode.wordpress.com/2017/09/12/augmented-reality-with-python-and-opencv-part-1/" - }, - { - "title": "C#: Building a BitTorrent client from scratch in C#", - "link": "https://www.seanjoflynn.com/research/bittorrent.html" - }, - { - "title": "Go: Building a BitTorrent client from the ground up in Go", - "link": "https://blog.jse.li/posts/torrent/" - }, - { - "title": "Nim: Writing a Bencode Parser", - "link": "https://xmonader.github.io/nimdays/day02_bencode.html" - }, - { - "title": "Node.js: Write your own bittorrent client", - "link": "https://allenkim67.github.io/programming/2016/05/04/how-to-make-your-own-bittorrent-client.html" - }, - { - "title": "Python: A BitTorrent client in Python 3.5", - "link": "http://markuseliasson.se/article/bittorrent-in-python/" - }, - { - "title": "ATS: Functional Blockchain", - "link": "https://beta.observablehq.com/@galletti94/functional-blockchain" - }, - { - "title": "C#: Programming The Blockchain in C#", - "link": "https://programmingblockchain.gitbooks.io/programmingblockchain/" - }, - { - "title": "Crystal: Write your own blockchain and PoW algorithm using Crystal", - "link": "https://medium.com/@bradford_hamilton/write-your-own-blockchain-and-pow-algorithm-using-crystal-d53d5d9d0c52" - }, - { - "title": "Go: Building Blockchain in Go", - "link": "https://jeiwan.cc/posts/building-blockchain-in-go-part-1/" - }, - { - "title": "Go: Code your own blockchain in less than 200 lines of Go", - "link": "https://medium.com/@mycoralhealth/code-your-own-blockchain-in-less-than-200-lines-of-go-e296282bcffc" - }, - { - "title": "Java: Creating Your First Blockchain with Java", - "link": "https://medium.com/programmers-blockchain/create-simple-blockchain-java-tutorial-from-scratch-6eeed3cb03fa" - }, - { - "title": "JavaScript: A cryptocurrency implementation in less than 1500 lines of code", - "link": "https://github.com/conradoqg/naivecoin" - }, - { - "title": "JavaScript: Build your own Blockchain in JavaScript", - "link": "https://github.com/nambrot/blockchain-in-js" - }, - { - "title": "JavaScript: Learn & Build a JavaScript Blockchain", - "link": "https://medium.com/digital-alchemy-holdings/learn-build-a-javascript-blockchain-part-1-ca61c285821e" - }, - { - "title": "JavaScript: Creating a blockchain with JavaScript", - "link": "https://github.com/SavjeeTutorials/SavjeeCoin" - }, - { - "title": "JavaScript: How To Launch Your Own Production-Ready Cryptocurrency", - "link": "https://hackernoon.com/how-to-launch-your-own-production-ready-cryptocurrency-ab97cb773371" - }, - { - "title": "JavaScript: Writing a Blockchain in Node.js", - "link": "https://www.jsmonday.dev/articles/34/writing-a-blockchain-in-node-js" - }, - { - "title": "Kotlin: Let’s implement a cryptocurrency in Kotlin", - "link": "https://medium.com/@vasilyf/lets-implement-a-cryptocurrency-in-kotlin-part-1-blockchain-8704069f8580" - }, - { - "title": "Python: Learn Blockchains by Building One", - "link": "https://hackernoon.com/learn-blockchains-by-building-one-117428612f46" - }, - { - "title": "Python: Build your own blockchain: a Python tutorial", - "link": "http://ecomunsing.com/build-your-own-blockchain" - }, - { - "title": "Python: A Practical Introduction to Blockchain with Python", - "link": "http://adilmoujahid.com/posts/2018/03/intro-blockchain-bitcoin-python/" - }, - { - "title": "Python: Let’s Build the Tiniest Blockchain", - "link": "https://medium.com/crypto-currently/lets-build-the-tiniest-blockchain-e70965a248b" - }, - { - "title": "Ruby: Programming Blockchains Step-by-Step (Manuscripts Book Edition)", - "link": "https://github.com/yukimotopress/programming-blockchains-step-by-step" - }, - { - "title": "Scala: How to build a simple actor-based blockchain", - "link": "https://medium.freecodecamp.org/how-to-build-a-simple-actor-based-blockchain-aac1e996c177" - }, - { - "title": "TypeScript: Naivecoin: a tutorial for building a cryptocurrency", - "link": "https://lhartikk.github.io/" - }, - { - "title": "TypeScript: NaivecoinStake: a tutorial for building a cryptocurrency with the Proof of Stake consensus", - "link": "https://naivecoinstake.learn.uno/" - }, - { - "title": "Haskell: Roll your own IRC bot", - "link": "https://wiki.haskell.org/Roll_your_own_IRC_bot" - }, - { - "title": "Java: How To Make a Scary Russian Twitter Bot With Java", - "link": "https://medium.com/@SeloSlav/how-to-make-a-scary-russian-twitter-bot-with-java-b7b62768a3ac" - }, - { - "title": "Node.js: Creating a Simple Facebook Messenger AI Bot with API.ai in Node.js", - "link": "https://tutorials.botsfloor.com/creating-a-simple-facebook-messenger-ai-bot-with-api-ai-in-node-js-50ae2fa5c80d" - }, - { - "title": "Node.js: How to make a responsive telegram bot", - "link": "https://www.sohamkamani.com/blog/2016/09/21/making-a-telegram-bot/" - }, - { - "title": "Node.js: Create a Discord bot", - "link": "https://discordjs.guide/" - }, - { - "title": "Node.js: gifbot - Building a GitHub App", - "link": "https://blog.scottlogic.com/2017/05/22/gifbot-github-integration.html" - }, - { - "title": "Node.js: Building A Simple AI Chatbot With Web Speech API And Node.js", - "link": "https://www.smashingmagazine.com/2017/08/ai-chatbot-web-speech-api-node-js/" - }, - { - "title": "Python: Chatbot Fundamentals: An interactive guide to writing bots in Python", - "link": "https://apps.worldwritable.com/tutorials/chatbot/" - }, - { - "title": "Python: How to Build Your First Slack Bot with Python", - "link": "https://www.fullstackpython.com/blog/build-first-slack-bot-python.html" - }, - { - "title": "Python: How to build a Slack Bot with Python using Slack Events API & Django under 20 minute", - "link": "https://medium.com/freehunch/how-to-build-a-slack-bot-with-python-using-slack-events-api-django-under-20-minute-code-included-269c3a9bf64e" - }, - { - "title": "Python: Build a Reddit Bot", - "link": "http://pythonforengineers.com/build-a-reddit-bot-part-1/" - }, - { - "title": "Python: How To Make A Reddit Bot", - "link": "https://www.youtube.com/watch?v=krTUf7BpTc0" - }, - { - "title": "Python: How To Create a Telegram Bot Using Python", - "link": "https://khashtamov.com/en/how-to-create-a-telegram-bot-using-python/" - }, - { - "title": "Python: Create a Twitter Bot in Python Using Tweepy", - "link": "https://medium.freecodecamp.org/creating-a-twitter-bot-in-python-with-tweepy-ac524157a607" - }, - { - "title": "Python: Creating Reddit Bot with Python & PRAW", - "link": "https://www.youtube.com/playlist?list=PLIFBTFgFpoJ9vmYYlfxRFV6U_XhG-4fpP" - }, - { - "title": "R: Build A Cryptocurrency Trading Bot with R", - "link": "https://towardsdatascience.com/build-a-cryptocurrency-trading-bot-with-r-1445c429e1b1" - }, - { - "title": "Rust: A bot for Starcraft in Rust, C or any other language", - "link": "https://habr.com/en/post/436254/" - }, - { - "title": "C: Rewriting the cat command from scratch", - "link": "https://learnto.computer/screencasts/bsd-cat" - }, - { - "title": "Go: Visualize your local git contributions with Go", - "link": "https://flaviocopes.com/go-git-contributions/" - }, - { - "title": "Go: Build a command line app with Go: lolcat", - "link": "https://flaviocopes.com/go-tutorial-lolcat/" - }, - { - "title": "Go: Building a cli command with Go: cowsay", - "link": "https://flaviocopes.com/go-tutorial-cowsay/" - }, - { - "title": "Go: Go CLI tutorial: fortune clone", - "link": "https://flaviocopes.com/go-tutorial-fortune/" - }, - { - "title": "Nim: Writing a stow alternative to manage dotfiles", - "link": "https://xmonader.github.io/nimdays/day06_nistow.html" - }, - { - "title": "C: Let's Build a Simple Database", - "link": "https://cstack.github.io/db_tutorial/" - }, - { - "title": "C++: Implementing a Key-Value Store", - "link": "http://codecapsule.com/2012/11/07/ikvs-implementing-a-key-value-store-table-of-contents/" - }, - { - "title": "C#: Build Your Own Database", - "link": "https://www.codeproject.com/Articles/1029838/Build-Your-Own-Database" - }, - { - "title": "Clojure: An Archaeology-Inspired Database", - "link": "http://aosabook.org/en/500L/an-archaeology-inspired-database.html" - }, - { - "title": "Crystal: Why you should build your own NoSQL Database", - "link": "https://medium.com/@marceloboeira/why-you-should-build-your-own-nosql-database-9bbba42039f5" - }, - { - "title": "JavaScript: Dagoba: an in-memory graph database", - "link": "http://aosabook.org/en/500L/dagoba-an-in-memory-graph-database.html" - }, - { - "title": "Python: DBDB: Dog Bed Database", - "link": "http://aosabook.org/en/500L/dbdb-dog-bed-database.html" - }, - { - "title": "Python: Write your own miniature Redis with Python", - "link": "http://charlesleifer.com/blog/building-a-simple-redis-server-with-python/" - }, - { - "title": "C: Linux containers in 500 lines of code", - "link": "https://blog.lizzie.io/linux-containers-in-500-loc.html" - }, - { - "title": "Go: Build Your Own Container Using Less than 100 Lines of Go", - "link": "https://www.infoq.com/articles/build-a-container-golang" - }, - { - "title": "Go: Building a container from scratch in Go", - "link": "https://www.youtube.com/watch?v=8fi7uSYlOdc" - }, - { - "title": "Python: A workshop on Linux containers: Rebuild Docker from Scratch", - "link": "https://github.com/Fewbytes/rubber-docker" - }, - { - "title": "Python: A proof-of-concept imitation of Docker, written in 100% Python", - "link": "https://github.com/tonybaloney/mocker" - }, - { - "title": "Shell: Docker implemented in around 100 lines of bash", - "link": "https://github.com/p8952/bocker" - }, - { - "title": "C: Virtual machine in C", - "link": "https://blog.felixangell.com/virtual-machine-in-c/" - }, - { - "title": "C: Write your Own Virtual Machine", - "link": "https://justinmeiners.github.io/lc3-vm/" - }, - { - "title": "C: Writing a Game Boy emulator, Cinoop", - "link": "https://cturt.github.io/cinoop.html" - }, - { - "title": "C++: How to write an emulator (CHIP-8 interpreter)", - "link": "http://www.multigesture.net/articles/how-to-write-an-emulator-chip-8-interpreter/" - }, - { - "title": "C++: Emulation tutorial (CHIP-8 interpreter)", - "link": "http://www.codeslinger.co.uk/pages/projects/chip8.html" - }, - { - "title": "C++: Emulation tutorial (GameBoy emulator)", - "link": "http://www.codeslinger.co.uk/pages/projects/gameboy.html" - }, - { - "title": "C++: Emulation tutorial (Master System emulator)", - "link": "http://www.codeslinger.co.uk/pages/projects/mastersystem/memory.html" - }, - { - "title": "Common Lisp: CHIP-8 in Common Lisp", - "link": "http://stevelosh.com/blog/2016/12/chip8-cpu/" - }, - { - "title": "JavaScript: GameBoy Emulation in JavaScript", - "link": "http://imrannazar.com/GameBoy-Emulation-in-JavaScript" - }, - { - "title": "Python: Emulation Basics: Write your own Chip 8 Emulator/Interpreter", - "link": "http://omokute.blogspot.com.br/2012/06/emulation-basics-write-your-own-chip-8.html" - }, - { - "title": "JavaScript: WTF is JSX (Let's Build a JSX Renderer)", - "link": "https://jasonformat.com/wtf-is-jsx/" - }, - { - "title": "JavaScript: A DIY guide to build your own React", - "link": "https://github.com/hexacta/didact" - }, - { - "title": "JavaScript: Reverse Engineering React", - "link": "https://vimeo.com/album/3930691" - }, - { - "title": "JavaScript: Building React From Scratch", - "link": "https://www.youtube.com/watch?v=_MAD4Oly9yg" - }, - { - "title": "JavaScript: Building Your Own React Clone in Five Easy Steps", - "link": "https://blog.javascripting.com/2016/10/05/building-your-own-react-clone-in-five-easy-steps/" - }, - { - "title": "JavaScript: Gooact: React in 160 lines of JavaScript", - "link": "https://medium.com/@sweetpalma/gooact-react-in-160-lines-of-javascript-44e0742ad60f" - }, - { - "title": "JavaScript: React Internals", - "link": "http://www.mattgreer.org/articles/react-internals-part-one-basic-rendering/" - }, - { - "title": "JavaScript: Learn how React Reconciler package works by building your own lightweight React DOM", - "link": "https://hackernoon.com/learn-you-some-custom-react-renderers-aed7164a4199" - }, - { - "title": "JavaScript: Build Yourself a Redux", - "link": "https://zapier.com/engineering/how-to-build-redux/" - }, - { - "title": "JavaScript: Let’s Write Redux!", - "link": "https://www.jamasoftware.com/blog/lets-write-redux/" - }, - { - "title": "JavaScript: Redux: Implementing Store from Scratch", - "link": "https://egghead.io/lessons/react-redux-implementing-store-from-scratch" - }, - { - "title": "JavaScript: Build Your own Simplified AngularJS in 200 Lines of JavaScript", - "link": "https://blog.mgechev.com/2015/03/09/build-learn-your-own-light-lightweight-angularjs/" - }, - { - "title": "JavaScript: Make Your Own AngularJS", - "link": "http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html" - }, - { - "title": "JavaScript: How to write your own Virtual DOM", - "link": "https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060" - }, - { - "title": "JavaScript: Building a frontend framework, from scratch, with components (templating, state, VDOM)", - "link": "https://mfrachet.github.io/create-frontend-framework/" - }, - { - "title": "JavaScript: Build your own React", - "link": "https://pomb.us/build-your-own-react/" - }, - { - "title": "C: Handmade Hero", - "link": "https://handmadehero.org/" - }, - { - "title": "C: How to Program an NES game in C", - "link": "https://nesdoug.com/" - }, - { - "title": "C: Chess Engine In C", - "link": "https://www.youtube.com/playlist?list=PLZ1QII7yudbc-Ky058TEaOstZHVbT-2hg" - }, - { - "title": "C: Let's Make: Dangerous Dave", - "link": "https://www.youtube.com/playlist?list=PLSkJey49cOgTSj465v2KbLZ7LMn10bCF9" - }, - { - "title": "C: Learn Video Game Programming in C", - "link": "https://www.youtube.com/playlist?list=PLT6WFYYZE6uLMcPGS3qfpYm7T_gViYMMt" - }, - { - "title": "C: Coding A Sudoku Solver in C", - "link": "https://www.youtube.com/playlist?list=PLkTXsX7igf8edTYU92nU-f5Ntzuf-RKvW" - }, - { - "title": "C: Coding a Rogue/Nethack RPG in C", - "link": "https://www.youtube.com/playlist?list=PLkTXsX7igf8erbWGYT4iSAhpnJLJ0Nk5G" - }, - { - "title": "C: On Tetris and Reimplementation", - "link": "https://brennan.io/2015/06/12/tetris-reimplementation/" - }, - { - "title": "C++: Breakout", - "link": "https://learnopengl.com/In-Practice/2D-Game/Breakout" - }, - { - "title": "C++: Beginning Game Programming v2.0", - "link": "http://lazyfoo.net/tutorials/SDL/" - }, - { - "title": "C++: Tetris tutorial in C++ platform independent focused in game logic for beginners", - "link": "http://javilop.com/gamedev/tetris-tutorial-in-c-platform-independent-focused-in-game-logic-for-beginners/" - }, - { - "title": "C++: Remaking Cavestory in C++", - "link": "https://www.youtube.com/watch?v=ETvApbD5xRo&list=PLNOBk_id22bw6LXhrGfhVwqQIa-M2MsLa" - }, - { - "title": "C++: Reconstructing Cave Story", - "link": "https://www.youtube.com/playlist?list=PL006xsVEsbKjSKBmLu1clo85yLrwjY67X" - }, - { - "title": "C++: Space Invaders from Scratch", - "link": "http://nicktasios.nl/posts/space-invaders-from-scratch-part-1.html" - }, - { - "title": "C#: Learn C# by Building a Simple RPG", - "link": "http://scottlilly.com/learn-c-by-building-a-simple-rpg-index/" - }, - { - "title": "C#: Creating a Roguelike Game in C#", - "link": "https://roguesharp.wordpress.com/" - }, - { - "title": "C#: Build a C#/WPF RPG", - "link": "https://scottlilly.com/build-a-cwpf-rpg/" - }, - { - "title": "Go: Games With Go", - "link": "https://gameswithgo.org/" - }, - { - "title": "Java: 3D Game Development with LWJGL 3", - "link": "https://lwjglgamedev.gitbooks.io/3d-game-development-with-lwjgl/content/" - }, - { - "title": "JavaScript: 2D breakout game using Phaser", - "link": "https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser" - }, - { - "title": "JavaScript: How to Make Flappy Bird in HTML5 With Phaser", - "link": "http://www.lessmilk.com/tutorial/flappy-bird-phaser-1" - }, - { - "title": "JavaScript: Developing Games with React, Redux, and SVG", - "link": "https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-1/" - }, - { - "title": "JavaScript: Build your own 8-Ball Pool game from scratch", - "link": "https://www.youtube.com/watch?v=aXwCrtAo4Wc" - }, - { - "title": "JavaScript: How to Make Your First Roguelike", - "link": "https://gamedevelopment.tutsplus.com/tutorials/how-to-make-your-first-roguelike--gamedev-13677" - }, - { - "title": "JavaScript: Think like a programmer: How to build Snake using only JavaScript, HTML & CSS", - "link": "https://medium.freecodecamp.org/think-like-a-programmer-how-to-build-snake-using-only-javascript-html-and-css-7b1479c3339e" - }, - { - "title": "Lua: BYTEPATH", - "link": "https://github.com/SSYGEN/blog/issues/30" - }, - { - "title": "Python: Developing Games With PyGame", - "link": "https://pythonprogramming.net/pygame-python-3-part-1-intro/" - }, - { - "title": "Python: Making Games with Python & Pygame", - "link": "https://inventwithpython.com/makinggames.pdf [pdf]" - }, - { - "title": "Python: The Complete Roguelike Tutorial", - "link": "https://www.youtube.com/playlist?list=PLKUel_nHsTQ1yX7tQxR_SQRdcOFyXfNAb" - }, - { - "title": "Python: Roguelike Tutorial Revised", - "link": "http://rogueliketutorials.com/" - }, - { - "title": "Ruby: Developing Games With Ruby", - "link": "https://leanpub.com/developing-games-with-ruby/read" - }, - { - "title": "Ruby: Ruby Snake", - "link": "https://www.diatomenterprises.com/gamedev-on-ruby-why-not/" - }, - { - "title": "Rust: Adventures in Rust: A Basic 2D Game", - "link": "https://a5huynh.github.io/posts/2018/adventures-in-rust/" - }, - { - "title": "Rust: Roguelike Tutorial in Rust + tcod", - "link": "https://tomassedovic.github.io/roguelike-tutorial/" - }, - { - "title": "Haskell: Reimplementing “git clone” in Haskell from the bottom up", - "link": "http://stefan.saasen.me/articles/git-clone-in-haskell-from-the-bottom-up/" - }, - { - "title": "JavaScript: Gitlet", - "link": "http://gitlet.maryrosecook.com/docs/gitlet.html" - }, - { - "title": "JavaScript: Build GIT - Learn GIT", - "link": "https://kushagragour.in/blog/2014/01/build-git-learn-git/" - }, - { - "title": "Python: Just enough of a Git client to create a repo, commit, and push itself to GitHub", - "link": "https://benhoyt.com/writings/pygit/" - }, - { - "title": "Python: Write yourself a Git!", - "link": "https://wyag.thb.lt/" - }, - { - "title": "Ruby: Rebuilding Git in Ruby", - "link": "https://robots.thoughtbot.com/rebuilding-git-in-ruby" - }, - { - "title": "C: Beej's Guide to Network Programming", - "link": "http://beej.us/guide/bgnet/" - }, - { - "title": "C: Let's code a TCP/IP stack", - "link": "http://www.saminiir.com/lets-code-tcp-ip-stack-1-ethernet-arp/" - }, - { - "title": "Ruby: How to build a network stack in Ruby", - "link": "https://medium.com/geckoboard-under-the-hood/how-to-build-a-network-stack-in-ruby-f73aeb1b661b" - }, - { - "title": "C#: Neural Network OCR", - "link": "https://www.codeproject.com/Articles/11285/Neural-Network-OCR" - }, - { - "title": "F#: Building Neural Networks in F#", - "link": "https://towardsdatascience.com/building-neural-networks-in-f-part-1-a2832ae972e6" - }, - { - "title": "Go: Build a multilayer perceptron with Golang", - "link": "https://made2591.github.io/posts/neuralnetwork" - }, - { - "title": "Go: How to build a simple artificial neural network with Go", - "link": "https://sausheong.github.io/posts/how-to-build-a-simple-artificial-neural-network-with-go/" - }, - { - "title": "Go: Building a Neural Net from Scratch in Go", - "link": "https://datadan.io/blog/neural-net-with-go" - }, - { - "title": "JavaScript / Java: Neural Networks - The Nature of Code", - "link": "https://www.youtube.com/playlist?list=PLRqwX-V7Uu6aCibgK1PTWWu9by6XFdCfh" - }, - { - "title": "JavaScript: Neural Network implementation in JavaScript, by an example", - "link": "https://franpapers.com/en/machine-learning-ai-en/2017-neural-network-implementation-in-javascript-by-an-example/" - }, - { - "title": "JavaScript: Neural networks from scratch for JavaScript linguists (Part1 — The Perceptron)", - "link": "https://hackernoon.com/neural-networks-from-scratch-for-javascript-linguists-part1-the-perceptron-632a4d1fbad2" - }, - { - "title": "Python: A Neural Network in 11 lines of Python", - "link": "https://iamtrask.github.io/2015/07/12/basic-python-network/" - }, - { - "title": "Python: Implement a Neural Network from Scratch", - "link": "https://victorzhou.com/blog/intro-to-neural-networks/" - }, - { - "title": "Python: Optical Character Recognition (OCR)", - "link": "http://aosabook.org/en/500L/optical-character-recognition-ocr.html" - }, - { - "title": "Python: Traffic signs classification with a convolutional network", - "link": "https://navoshta.com/traffic-signs-classification/" - }, - { - "title": "Python: Generate Music using LSTM Neural Network in Keras", - "link": "https://towardsdatascience.com/how-to-generate-music-using-a-lstm-neural-network-in-keras-68786834d4c5" - }, - { - "title": "Python: An Introduction to Convolutional Neural Networks", - "link": "https://victorzhou.com/blog/intro-to-cnns-part-1/" - }, - { - "title": "Assembly: Writing a Tiny x86 Bootloader", - "link": "http://joebergeron.io/posts/post_two.html" - }, - { - "title": "Assembly: Baking Pi – Operating Systems Development", - "link": "http://www.cl.cam.ac.uk/projects/raspberrypi/tutorials/os/index.html" - }, - { - "title": "C: Building a software and hardware stack for a simple computer from scratch", - "link": "https://www.youtube.com/watch?v=ZjwvMcP3Nf0&list=PLU94OURih-CiP4WxKSMt3UcwMSDM3aTtX" - }, - { - "title": "C: Operating Systems: From 0 to 1", - "link": "https://tuhdo.github.io/os01/" - }, - { - "title": "C: The little book about OS development", - "link": "https://littleosbook.github.io/" - }, - { - "title": "C: Roll your own toy UNIX-clone OS", - "link": "http://jamesmolloy.co.uk/tutorial_html/" - }, - { - "title": "C: Kernel 101 – Let’s write a Kernel", - "link": "https://arjunsreedharan.org/post/82710718100/kernel-101-lets-write-a-kernel" - }, - { - "title": "C: Kernel 201 – Let’s write a Kernel with keyboard and screen support", - "link": "https://arjunsreedharan.org/post/99370248137/kernel-201-lets-write-a-kernel-with-keyboard" - }, - { - "title": "C: Build a minimal multi-tasking kernel for ARM from scratch", - "link": "https://github.com/jserv/mini-arm-os" - }, - { - "title": "C: How to create an OS from scratch", - "link": "https://github.com/cfenollosa/os-tutorial" - }, - { - "title": "C: Malloc tutorial", - "link": "https://danluu.com/malloc-tutorial/" - }, - { - "title": "C: Hack the virtual memory", - "link": "https://blog.holbertonschool.com/hack-the-virtual-memory-c-strings-proc/" - }, - { - "title": "C: Learning operating system development using Linux kernel and Raspberry Pi", - "link": "https://github.com/s-matyukevich/raspberry-pi-os" - }, - { - "title": "C: Operating systems development for Dummies", - "link": "https://medium.com/@lduck11007/operating-systems-development-for-dummies-3d4d786e8ac" - }, - { - "title": "C++: Write your own Operating System", - "link": "https://www.youtube.com/playlist?list=PLHh55M_Kq4OApWScZyPl5HhgsTJS9MZ6M" - }, - { - "title": "C++: Writing a Bootloader", - "link": "http://3zanders.co.uk/2017/10/13/writing-a-bootloader/" - }, - { - "title": "Rust: Writing an OS in Rust", - "link": "https://os.phil-opp.com/" - }, - { - "title": "C: Video Game Physics Tutorial", - "link": "https://www.toptal.com/game/video-game-physics-part-i-an-introduction-to-rigid-body-dynamics" - }, - { - "title": "C++: Game physics series by Allen Chou", - "link": "http://allenchou.net/game-physics-series/" - }, - { - "title": "C++: How to Create a Custom Physics Engine", - "link": "https://gamedevelopment.tutsplus.com/series/how-to-create-a-custom-physics-engine--gamedev-12715" - }, - { - "title": "C++: 3D Physics Engine Tutorial", - "link": "https://www.youtube.com/playlist?list=PLEETnX-uPtBXm1KEr_2zQ6K_0hoGH6JJ0" - }, - { - "title": "JavaScript: Build your own basic physics engine in JavaScript", - "link": "https://www.graphitedigital.com/blog/build-your-own-basic-physics-engine-in-javascript" - }, - { - "title": "JavaScript: How Physics Engines Work", - "link": "http://buildnewgames.com/gamephysics/" - }, - { - "title": "JavaScript: Broad Phase Collision Detection Using Spatial Partitioning", - "link": "http://buildnewgames.com/broad-phase-collision-detection/" - }, - { - "title": "JavaScript: Build a simple 2D physics engine for JavaScript games", - "link": "https://www.ibm.com/developerworks/library/wa-build2dphysicsengine/index.html" - }, - { - "title": "(any): mal - Make a Lisp", - "link": "https://github.com/kanaka/mal#mal---make-a-lisp" - }, - { - "title": "Assembly: Jonesforth", - "link": "https://github.com/nornagon/jonesforth/blob/master/jonesforth.S" - }, - { - "title": "C: Baby's First Garbage Collector", - "link": "http://journal.stuffwithstuff.com/2013/12/08/babys-first-garbage-collector/" - }, - { - "title": "C: Build Your Own Lisp: Learn C and build your own programming language in 1000 lines of code", - "link": "http://www.buildyourownlisp.com/" - }, - { - "title": "C: Writing a Simple Garbage Collector in C", - "link": "http://maplant.com/gc.html" - }, - { - "title": "C: C interpreter that interprets itself.", - "link": "https://github.com/lotabout/write-a-C-interpreter" - }, - { - "title": "C: A C & x86 version of the \"Let's Build a Compiler\" by Jack Crenshaw", - "link": "https://github.com/lotabout/Let-s-build-a-compiler" - }, - { - "title": "C++: Writing Your Own Toy Compiler Using Flex", - "link": "https://gnuu.org/2009/09/18/writing-your-own-toy-compiler/" - }, - { - "title": "C++: How to Create a Compiler", - "link": "https://www.youtube.com/watch?v=eF9qWbuQLuw" - }, - { - "title": "C++: Kaleidoscope: Implementing a Language with LLVM", - "link": "https://llvm.org/docs/tutorial/MyFirstLanguageFrontend/index.html" - }, - { - "title": "F#: Understanding Parser Combinators", - "link": "https://fsharpforfunandprofit.com/posts/understanding-parser-combinators/" - }, - { - "title": "Elixir: Demystifying compilers by writing your own", - "link": "https://www.youtube.com/watch?v=zMJYoYwOCd4" - }, - { - "title": "Go: The Super Tiny Compiler", - "link": "https://github.com/hazbo/the-super-tiny-compiler" - }, - { - "title": "Go: Lexical Scanning in Go", - "link": "https://www.youtube.com/watch?v=HxaD_trXwRE" - }, - { - "title": "Haskell: Let's Build a Compiler", - "link": "https://g-ford.github.io/cradle/" - }, - { - "title": "Haskell: Write You a Haskell", - "link": "http://dev.stephendiehl.com/fun/" - }, - { - "title": "Haskell: Write Yourself a Scheme in 48 Hours", - "link": "https://en.wikibooks.org/wiki/Write_Yourself_a_Scheme_in_48_Hours" - }, - { - "title": "Haskell: Write You A Scheme", - "link": "https://www.wespiser.com/writings/wyas/home.html" - }, - { - "title": "Java: Crafting interpreters: A handbook for making programming languages", - "link": "http://www.craftinginterpreters.com/" - }, - { - "title": "Java: Creating JVM Language", - "link": "http://jakubdziworski.github.io/categories.html#Enkel-ref" - }, - { - "title": "JavaScript: The Super Tiny Compiler", - "link": "https://github.com/jamiebuilds/the-super-tiny-compiler" - }, - { - "title": "JavaScript: The Super Tiny Interpreter", - "link": "https://github.com/keyanzhang/the-super-tiny-interpreter" - }, - { - "title": "JavaScript: Little Lisp interpreter", - "link": "https://maryrosecook.com/blog/post/little-lisp-interpreter" - }, - { - "title": "JavaScript: How to implement a programming language in JavaScript", - "link": "http://lisperator.net/pltut/" - }, - { - "title": "OCaml: Writing a C Compiler", - "link": "https://norasandler.com/2017/11/29/Write-a-Compiler.html" - }, - { - "title": "OCaml: Writing a Lisp, the series", - "link": "https://bernsteinbear.com/blog/lisp/" - }, - { - "title": "Pascal: Let's Build a Compiler", - "link": "https://compilers.iecc.com/crenshaw/" - }, - { - "title": "Python: A Python Interpreter Written in Python", - "link": "http://aosabook.org/en/500L/a-python-interpreter-written-in-python.html" - }, - { - "title": "Python: lisp.py: Make your own Lisp interpreter", - "link": "http://khamidou.com/compilers/lisp.py/" - }, - { - "title": "Python: Simple Iterator-based Parsing", - "link": "http://effbot.org/zone/simple-iterator-parser.htm" - }, - { - "title": "Python: Simple Top-Down Parsing in Python", - "link": "http://effbot.org/zone/simple-top-down-parsing.htm" - }, - { - "title": "Python: How to Write a Lisp Interpreter in Python", - "link": "http://norvig.com/lispy.html" - }, - { - "title": "Python: Let’s Build A Simple Interpreter", - "link": "https://ruslanspivak.com/lsbasi-part1/" - }, - { - "title": "Python: Make Your Own Simple Interpreted Programming Language", - "link": "https://www.youtube.com/watch?v=dj9CBS3ikGA&list=PLZQftyCk7_SdoVexSmwy_tBgs7P0b97yD&index=1" - }, - { - "title": "Racket: Beautiful Racket: How to make your own programming languages with Racket", - "link": "https://beautifulracket.com/" - }, - { - "title": "Ruby: A Compiler From Scratch", - "link": "https://www.destroyallsoftware.com/screencasts/catalog/a-compiler-from-scratch" - }, - { - "title": "Ruby: Markdown compiler from scratch in Ruby", - "link": "https://blog.beezwax.net/2017/07/07/writing-a-markdown-compiler/" - }, - { - "title": "Rust: So You Want to Build a Language VM", - "link": "https://blog.subnetzero.io/post/building-language-vm-part-00/" - }, - { - "title": "Rust: Learning Parser Combinators With Rust", - "link": "https://bodil.lol/parser-combinators/" - }, - { - "title": "Swift: Building a LISP from scratch with Swift", - "link": "https://www.uraimo.com/2017/02/05/building-a-lisp-from-scratch-with-swift/" - }, - { - "title": "TypeScript: Build your own WebAssembly Compiler", - "link": "https://blog.scottlogic.com/2019/05/17/webassembly-compiler.html" - }, - { - "title": "C: A Regular Expression Matcher", - "link": "https://www.cs.princeton.edu/courses/archive/spr09/cos333/beautiful.html" - }, - { - "title": "C: Regular Expression Matching Can Be Simple And Fast", - "link": "https://swtch.com/~rsc/regexp/regexp1.html" - }, - { - "title": "JavaScript: Build a Regex Engine in Less than 40 Lines of Code", - "link": "https://nickdrane.com/build-your-own-regex/" - }, - { - "title": "JavaScript: How to implement regular expressions in functional javascript using derivatives", - "link": "http://dpk.io/dregs/toydregs" - }, - { - "title": "JavaScript: Implementing a Regular Expression Engine", - "link": "https://deniskyashif.com/2019/02/17/implementing-a-regular-expression-engine/" - }, - { - "title": "Perl: How Regexes Work", - "link": "https://perl.plover.com/Regex/article.html" - }, - { - "title": "Scala: No Magic: Regular Expressions", - "link": "https://rcoh.svbtle.com/no-magic-regular-expressions" - }, - { - "title": "CSS: A search engine in CSS", - "link": "https://stories.algolia.com/a-search-engine-in-css-b5ec4e902e97" - }, - { - "title": "Python: Building a search engine using Redis and redis-py", - "link": "http://www.dr-josiah.com/2010/07/building-search-engine-using-redis-and.html" - }, - { - "title": "Python: Building a Vector Space Indexing Engine in Python", - "link": "https://boyter.org/2010/08/build-vector-space-search-engine-python/" - }, - { - "title": "Python: Building A Python-Based Search Engine", - "link": "https://www.youtube.com/watch?v=cY7pE7vX6MU" - }, - { - "title": "Python: Making text search learn from feedback", - "link": "https://medium.com/filament-ai/making-text-search-learn-from-feedback-4fe210fd87b0" - }, - { - "title": "Python: Finding Important Words in Text Using TF-IDF", - "link": "https://stevenloria.com/tf-idf/" - }, - { - "title": "C: Tutorial - Write a Shell in C", - "link": "https://brennan.io/2015/01/16/write-a-shell-in-c/" - }, - { - "title": "C: Let's build a shell!", - "link": "https://github.com/kamalmarhubi/shell-workshop" - }, - { - "title": "C: Writing a UNIX Shell", - "link": "https://indradhanush.github.io/blog/writing-a-unix-shell-part-1/" - }, - { - "title": "C: Build Your Own Shell", - "link": "https://github.com/tokenrove/build-your-own-shell" - }, - { - "title": "Go: Writing a simple shell in Go", - "link": "https://sj14.gitlab.io/post/2018-07-01-go-unix-shell/" - }, - { - "title": "Ruby: A Unix Shell in Ruby", - "link": "https://www.jstorimer.com/blogs/workingwithcode/7766107-a-unix-shell-in-ruby" - }, - { - "title": "Rust: Build Your Own Shell using Rust", - "link": "https://www.joshmcguigan.com/blog/build-your-own-shell-rust/" - }, - { - "title": "JavaScript: JavaScript template engine in just 20 lines", - "link": "http://krasimirtsonev.com/blog/article/Javascript-template-engine-in-just-20-line" - }, - { - "title": "JavaScript: Understanding JavaScript Micro-Templating", - "link": "https://medium.com/wdstack/understanding-javascript-micro-templating-f37a37b3b40e" - }, - { - "title": "Python: Approach: Building a toy template engine in Python", - "link": "http://alexmic.net/building-a-template-engine/" - }, - { - "title": "Python: A Template Engine", - "link": "http://aosabook.org/en/500L/a-template-engine.html" - }, - { - "title": "Ruby: How to write a template engine in less than 30 lines of code", - "link": "http://bits.citrusbyte.com/how-to-write-a-template-library/" - }, - { - "title": "C: Build Your Own Text Editor", - "link": "https://viewsourcecode.org/snaptoken/kilo/" - }, - { - "title": "C++: Designing a Simple Text Editor", - "link": "http://www.fltk.org/doc-1.1/editor.html" - }, - { - "title": "Python: Python Tutorial: Make Your Own Text Editor", - "link": "https://www.youtube.com/watch?v=xqDonHEYPgA" - }, - { - "title": "Python: Create a Simple Python Text Editor!", - "link": "http://www.instructables.com/id/Create-a-Simple-Python-Text-Editor/" - }, - { - "title": "Ruby: Build a Collaborative Text Editor Using Rails", - "link": "https://blog.aha.io/text-editor/" - }, - { - "title": "Python: Developing a License Plate Recognition System with Machine Learning in Python", - "link": "https://blog.devcenter.co/developing-a-license-plate-recognition-system-with-machine-learning-in-python-787833569ccd" - }, - { - "title": "Python: Building a Facial Recognition Pipeline with Deep Learning in Tensorflow", - "link": "https://hackernoon.com/building-a-facial-recognition-pipeline-with-deep-learning-in-tensorflow-66e7645015b8" - }, - { - "title": "C++: Let's Make a Voxel Engine", - "link": "https://sites.google.com/site/letsmakeavoxelengine/home" - }, - { - "title": "Java: Let's make a voxel engine", - "link": "https://www.youtube.com/watch?v=C_Fo9PcrVXA&list=PLXa65xzz2vplye7cn1HH4GyE6_FjnDSug&index=1" - }, - { - "title": "Java: Java Voxel Engine Tutorial", - "link": "https://www.youtube.com/watch?v=QZ4Vk2PkPZk&list=PL80Zqpd23vJfyWQi-8FKDbeO_ZQamLKJL" - }, - { - "title": "PHP: Code a Search Engine in PHP", - "link": "https://boyter.org/2013/01/code-for-a-search-engine-in-php-part-1/" - }, - { - "title": "Ruby: Write an Internet search engine with 200 lines of Ruby code", - "link": "https://blog.saush.com/2009/03/17/write-an-internet-search-engine-with-200-lines-of-ruby-code/" - }, - { - "title": "C#: Writing a Web Server from Scratch", - "link": "https://www.codeproject.com/Articles/859108/Writing-a-Web-Server-from-Scratch" - }, - { - "title": "Node.js: Let's code a web server from scratch with NodeJS Streams", - "link": "https://www.codementor.io/ziad-saab/let-s-code-a-web-server-from-scratch-with-nodejs-streams-h4uc9utji" - }, - { - "title": "Node.js: lets-build-express", - "link": "https://github.com/antoaravinth/lets-build-express" - }, - { - "title": "PHP: Writing a webserver in pure PHP", - "link": "http://station.clancats.com/writing-a-webserver-in-pure-php/" - }, - { - "title": "Python: A Simple Web Server", - "link": "http://aosabook.org/en/500L/a-simple-web-server.html" - }, - { - "title": "Python: Let’s Build A Web Server.", - "link": "https://ruslanspivak.com/lsbaws-part1/" - }, - { - "title": "Python: Web application from scratch", - "link": "https://defn.io/2018/02/25/web-app-from-scratch-01/" - }, - { - "title": "Python: Building a basic HTTP Server from scratch in Python", - "link": "http://joaoventura.net/blog/2017/python-webserver/" - }, - { - "title": "Python: Implementing a RESTful Web API with Python & Flask", - "link": "http://blog.luisrei.com/articles/flaskrest.html" - }, - { - "title": "Ruby: Building a simple websockets server from scratch in Ruby", - "link": "http://blog.honeybadger.io/building-a-simple-websockets-server-from-scratch-in-ruby/" - }, - { - "title": "(any): From NAND to Tetris: Building a Modern Computer From First Principles", - "link": "http://nand2tetris.org/" - }, - { - "title": "Alloy: The Same-Origin Policy", - "link": "http://aosabook.org/en/500L/the-same-origin-policy.html" - }, - { - "title": "C: How to Write a Video Player in Less Than 1000 Lines", - "link": "http://dranger.com/ffmpeg/ffmpeg.html" - }, - { - "title": "C: Learn how to write a hash table in C", - "link": "https://github.com/jamesroutley/write-a-hash-table" - }, - { - "title": "C: The very basics of a terminal emulator", - "link": "https://www.uninformativ.de/blog/postings/2018-02-24/0/POSTING-en.html" - }, - { - "title": "C: Write a System Call", - "link": "https://brennan.io/2016/11/14/kernel-dev-ep3/" - }, - { - "title": "C: Sol - An MQTT broker from scratch", - "link": "https://codepr.github.io/posts/sol-mqtt-broker" - }, - { - "title": "C++: Build your own VR headset for $100", - "link": "https://github.com/relativty/Relativ" - }, - { - "title": "C++: How X Window Managers work and how to write one", - "link": "https://seasonofcode.com/posts/how-x-window-managers-work-and-how-to-write-one-part-i.html" - }, - { - "title": "C++: Writing a Linux Debugger", - "link": "https://blog.tartanllama.xyz/writing-a-linux-debugger-setup/" - }, - { - "title": "C++: How a 64k intro is made", - "link": "http://www.lofibucket.com/articles/64k_intro.html" - }, - { - "title": "C#: C# Networking: Create a TCP chater server, TCP games, UDP Pong and more", - "link": "https://16bpp.net/tutorials/csharp-networking" - }, - { - "title": "C#: Loading and rendering 3D skeletal animations from scratch in C# and GLSL", - "link": "https://www.seanjoflynn.com/research/skeletal-animation.html" - }, - { - "title": "Clojure: Building a spell-checker", - "link": "https://bernhardwenzel.com/articles/clojure-spellchecker/" - }, - { - "title": "Go: Let's Create a Simple Load Balancer", - "link": "https://kasvith.github.io/posts/lets-create-a-simple-lb-go/" - }, - { - "title": "Java: How to Build an Android Reddit App", - "link": "https://www.youtube.com/playlist?list=PLgCYzUzKIBE9HUJU-upNvl3TRVAo9W47y" - }, - { - "title": "JavaScript: Build Your Own Module Bundler - Minipack", - "link": "https://github.com/ronami/minipack" - }, - { - "title": "JavaScript: Learn JavaScript Promises by Building a Promise from Scratch", - "link": "https://levelup.gitconnected.com/understand-javascript-promises-by-building-a-promise-from-scratch-84c0fd855720" - }, - { - "title": "JavaScript: Implementing promises from scratch (TDD way)", - "link": "https://www.mauriciopoppe.com/notes/computer-science/computation/promises/" - }, - { - "title": "JavaScript: Implement your own — call(), apply() and bind() method in JavaScript", - "link": "https://blog.usejournal.com/implement-your-own-call-apply-and-bind-method-in-javascript-42cc85dba1b" - }, - { - "title": "JavaScript: JavaScript Algorithms and Data Structures", - "link": "https://github.com/trekhleb/javascript-algorithms" - }, - { - "title": "JavaScript: How to Make an Evolutionary Tetris AI", - "link": "https://www.youtube.com/watch?v=xLHCMMGuN0Q" - }, - { - "title": "JavaScript: Build a ride hailing app with React Native", - "link": "https://pusher.com/tutorials/ride-hailing-react-native" - }, - { - "title": "Kotlin: Build Your Own Cache", - "link": "https://github.com/kezhenxu94/cache-lite" - }, - { - "title": "Nim: Writing a Redis Protocol Parser", - "link": "https://xmonader.github.io/nimdays/day12_resp.html" - }, - { - "title": "Nim: Writing a Build system", - "link": "https://xmonader.github.io/nimdays/day11_buildsystem.html" - }, - { - "title": "Nim: Writing a MiniTest Framework", - "link": "https://xmonader.github.io/nimdays/day08_minitest.html" - }, - { - "title": "Nim: Writing a DMIDecode Parser", - "link": "https://xmonader.github.io/nimdays/day01_dmidecode.html" - }, - { - "title": "Nim: Writing a INI Parser", - "link": "https://xmonader.github.io/nimdays/day05_iniparser.html" - }, - { - "title": "Nim: Writing a Link Checker", - "link": "https://xmonader.github.io/nimdays/day04_asynclinkschecker.html" - }, - { - "title": "Nim: Writing a URL Shortening Service", - "link": "https://xmonader.github.io/nimdays/day07_shorturl.html" - }, - { - "title": "Node.js: Build a static site generator in 40 lines with Node.js", - "link": "https://www.webdevdrops.com/build-static-site-generator-nodejs-8969ebe34b22/" - }, - { - "title": "Node.js: Building A Simple Single Sign On(SSO) Server And Solution From Scratch In Node.js.", - "link": "https://codeburst.io/building-a-simple-single-sign-on-sso-server-and-solution-from-scratch-in-node-js-ea6ee5fdf340" - }, - { - "title": "Node.js: How to create a real-world Node CLI app with Node", - "link": "https://medium.freecodecamp.org/how-to-create-a-real-world-node-cli-app-with-node-391b727bbed3" - }, - { - "title": "PHP: Write your own MVC from scratch in PHP", - "link": "https://chaitya62.github.io/2018/04/29/Writing-your-own-MVC-from-Scratch-in-PHP.html" - }, - { - "title": "PHP: Make your own blog", - "link": "https://ilovephp.jondh.me.uk/en/tutorial/make-your-own-blog" - }, - { - "title": "PHP: Modern PHP Without a Framework", - "link": "https://kevinsmith.io/modern-php-without-a-framework" - }, - { - "title": "Python: Build a Deep Learning Library", - "link": "https://www.youtube.com/watch?v=o64FV-ez6Gw" - }, - { - "title": "Python: How to Build a Kick-Ass Mobile Document Scanner in Just 5 Minutes", - "link": "https://www.pyimagesearch.com/2014/09/01/build-kick-ass-mobile-document-scanner-just-5-minutes/" - }, - { - "title": "Python: Continuous Integration System", - "link": "http://aosabook.org/en/500L/a-continuous-integration-system.html" - }, - { - "title": "Python: Recommender Systems in Python: Beginner Tutorial", - "link": "https://www.datacamp.com/community/tutorials/recommender-systems-python" - }, - { - "title": "Python: Write SMS-spam detector with Scikit-learn", - "link": "https://medium.com/@kopilov.vlad/detect-sms-spam-in-kaggle-with-scikit-learn-5f6afa7a3ca2" - }, - { - "title": "Python: A Simple Content-Based Recommendation Engine in Python", - "link": "http://blog.untrod.com/2016/06/simple-similar-products-recommendation-engine-in-python.html" - }, - { - "title": "Python: Stock Market Predictions with LSTM in Python", - "link": "https://www.datacamp.com/community/tutorials/lstm-python-stock-market" - }, - { - "title": "Python: Build your own error-correction fountain code with Luby Transform Codes", - "link": "https://franpapers.com/en/algorithmic/2018-introduction-to-fountain-codes-lt-codes-with-python/" - }, - { - "title": "Python: Building a simple Generative Adversial Network (GAN) using Tensorflow", - "link": "https://blog.paperspace.com/implementing-gans-in-tensorflow/" - }, - { - "title": "Python: Learn ML Algorithms by coding: Decision Trees", - "link": "https://lethalbrains.com/learn-ml-algorithms-by-coding-decision-trees-439ac503c9a4" - }, - { - "title": "Python: JSON Decoding Algorithm", - "link": "https://github.com/cheery/json-algorithm" - }, - { - "title": "Ruby: A Pedometer in the Real World", - "link": "http://aosabook.org/en/500L/a-pedometer-in-the-real-world.html" - }, - { - "title": "Ruby: Creating a Linux Desktop application with Ruby", - "link": "https://iridakos.com/tutorials/2018/01/25/creating-a-gtk-todo-application-with-ruby" - }, - { - "title": "Rust: Let's build a browser engine", - "link": "https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html" - }, - { - "title": "Rust: Building a DNS server in Rust", - "link": "https://github.com/EmilHernvall/dnsguide/blob/master/README.md" - }, - { - "title": "Rust: Writing Scalable Chat Service from Scratch", - "link": "https://nbaksalyar.github.io/2015/07/10/writing-chat-in-rust.html" - }, - { - "title": "TypeScript: Tiny Package Manager: Learns how npm or Yarn works", - "link": "https://github.com/g-plane/tiny-package-manager" - }, - { - "title": "Write a CSV to HTML program", - "link": "https://programmingpraxis.com/2020/03/17/csv-to-html/" - }, - { - "title": "Write a Texas Hold 'Em Poker program", - "link": "https://programmingpraxis.com/2010/03/23/texas-hold-em/" - }, - { - "title": "Write a Turing Machine Simulator", - "link": "https://programmingpraxis.com/2009/03/27/a-turing-machine-simulator/" - }, - { - "title": "Nim: A two-player game of mathematical logic", - "link": "https://programmingpraxis.com/2010/01/08/nim/" - }, - { - "title": "Traveling Salesman: Brute Force: Examine all possible permutations to find the least-cost tour", - "link": "https://programmingpraxis.com/2010/03/12/traveling-salesman-brute-force/" - }, - { - "title": "The Seven Bridges of Königsberg: A classic graph puzzle due to Leonhard Euler", - "link": "https://programmingpraxis.com/2013/05/31/the-seven-bridges-of-knigsberg/" - }, - { - "title": "Adi Shamir’s Threshold Scheme: Use cryptography to share a secret, by Graham Enos", - "link": "https://programmingpraxis.com/2011/06/17/adi-shamirs-threshold-scheme/" - }, - { - "title": "Knight Rider: Classic problem of the knight’s tour", - "link": "https://programmingpraxis.com/2011/12/02/knight-rider/" - }, - { - "title": "Unix Paths: Convert relative Unix path to absolute, by Robert Fisher", - "link": "https://programmingpraxis.com/2013/08/13/unix-paths/" - }, - { - "title": "The First Computer Program: Ada Lovelace’s program to compute Bernoulli numbers for Charles Babbage’s Analytical Engine", - "link": "https://programmingpraxis.com/2011/02/08/the-first-computer-program/" - }, - { - "title": "Steve Yegge’s Phone-Screen Coding Exercises", - "link": "https://programmingpraxis.com/2009/06/30/steve-yegges-phone-screen-coding-exercises/" - }, - { - "title": "Word Count: An implementation of the unix wc program", - "link": "https://programmingpraxis.com/2009/12/08/word-count/" - }, - { - "title": "Grep: Simple version of the classic unix regular-expression matching utility", - "link": "https://programmingpraxis.com/2009/09/25/grep/" - }, - { - "title": "Cal: Print a twelve-month calendar", - "link": "https://programmingpraxis.com/2010/01/01/cal-2/" - }, - { - "title": "Diff: Find the differences between two text files", - "link": "https://programmingpraxis.com/2010/06/08/diff/" - }, - { - "title": "J K Rowling: Identify an author using forensic linguistics", - "link": "https://programmingpraxis.com/2013/07/19/j-k-rowling/" - }, - { - "title": "How to write your first Quine program", - "link": "https://towardsdatascience.com/how-to-write-your-first-quine-program-947f2b7e4a6f" - }, - { - "title": "Code The Game Of Life With React", - "link": "https://www.freecodecamp.org/news/create-gameoflife-with-react-in-one-hour-8e686a410174/" - }, - { - "title": "Build A Chat App with Sentiment Analysis", - "link": "https://codeburst.io/build-a-chat-app-with-sentiment-analysis-using-next-js-c43ebf3ea643" - }, -] diff --git a/projects/Q&A-section/app.js b/projects/q-and-a-section/app.js similarity index 100% rename from projects/Q&A-section/app.js rename to projects/q-and-a-section/app.js diff --git a/projects/Q&A-section/index.html b/projects/q-and-a-section/index.html similarity index 100% rename from projects/Q&A-section/index.html rename to projects/q-and-a-section/index.html diff --git a/projects/Q&A-section/styles.css b/projects/q-and-a-section/styles.css similarity index 100% rename from projects/Q&A-section/styles.css rename to projects/q-and-a-section/styles.css diff --git a/projects/recipe-book-app/index.html b/projects/recipe-book-app/index.html new file mode 100644 index 0000000..b93360d --- /dev/null +++ b/projects/recipe-book-app/index.html @@ -0,0 +1,57 @@ + + + + + + + Document + + + +
+

Recipe Book App

+
+ +
+
    + +
+
+ + + diff --git a/projects/recipe-book-app/index.js b/projects/recipe-book-app/index.js new file mode 100644 index 0000000..d35b3b8 --- /dev/null +++ b/projects/recipe-book-app/index.js @@ -0,0 +1,50 @@ +const API_KEY = "275d58779ccf4e22af03e792e8819fff"; +const recipeListEl = document.getElementById("recipe-list"); + +function displayRecipes(recipes) { + recipeListEl.innerHTML = ""; + recipes.forEach((recipe) => { + const recipeItemEl = document.createElement("li"); + recipeItemEl.classList.add("recipe-item"); + recipeImageEl = document.createElement("img"); + recipeImageEl.src = recipe.image; + recipeImageEl.alt = "recipe image"; + + recipeTitleEl = document.createElement("h2"); + recipeTitleEl.innerText = recipe.title; + + recipeIngredientsEl = document.createElement("p"); + recipeIngredientsEl.innerHTML = ` + Ingredients: ${recipe.extendedIngredients + .map((ingredient) => ingredient.original) + .join(", ")} + `; + + recipeLinkEl = document.createElement("a"); + recipeLinkEl.href = recipe.sourceUrl; + recipeLinkEl.innerText = "View Recipe"; + + recipeItemEl.appendChild(recipeImageEl); + recipeItemEl.appendChild(recipeTitleEl); + recipeItemEl.appendChild(recipeIngredientsEl); + recipeItemEl.appendChild(recipeLinkEl); + recipeListEl.appendChild(recipeItemEl); + }); +} + +async function getRecipes() { + const response = await fetch( + `https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}` + ); + + const data = await response.json(); + + return data.recipes; +} + +async function init() { + const recipes = await getRecipes(); + displayRecipes(recipes); +} + +init(); diff --git a/projects/recipe-book-app/style.css b/projects/recipe-book-app/style.css new file mode 100644 index 0000000..9e56d02 --- /dev/null +++ b/projects/recipe-book-app/style.css @@ -0,0 +1,104 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; +} + +header { + background: #0c2461; + color: #fff; + padding: 20px; + text-align: center; +} + +h1 { + margin: 0; + font-size: 36px; +} + +.container { + margin: 0 auto; + max-width: 1200px; + padding: 20px; +} + +.recipe-list { + list-style: none; + margin: 0; + padding: 0; +} + +.recipe-item { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + border-radius: 5px; + overflow: hidden; +} + +.recipe-item img { + width: 150px; + height: 150px; + object-fit: cover; +} + +.recipe-item h2 { + margin: 0; + font-size: 20px; + padding: 10px; + min-width: 200px; +} + +.recipe-item p { + margin: 0; + padding: 10px; + color: #777; +} + +.recipe-item a { + background: #0c2461; + color: #fff; + min-width: 150px; + padding: 10px; + text-decoration: none; + text-transform: uppercase; + font-size: 14px; + transition: background 0.3s ease; +} + +.recipe-item a:hover { + background: #1e3799; +} + +@media screen and (max-width: 768px) { + .container { + max-width: 90%; + } + .recipe-item { + flex-direction: column; + } + + .recipe-item img { + width: 100%; + height: auto; + margin-bottom: 10px; + } + + .recipe-item h2 { + font-size: 20px; + padding: 0; + margin-bottom: 10px; + } + + .recipe-item p { + font-size: 14px; + margin-bottom: 10px; + } + + .recipe-item a { + width: 100%; + text-align: center; + } +} diff --git a/projects/rock-paper-scissors-game/index.html b/projects/rock-paper-scissors-game/index.html new file mode 100644 index 0000000..c458606 --- /dev/null +++ b/projects/rock-paper-scissors-game/index.html @@ -0,0 +1,25 @@ + + + + + + + Rock Paper Scissors Game + + + +

Rock Paper Scissors Game

+

Choose your move:

+
+ + + +
+

+

+ Your score: 0 + Computer score: 0 +

+ + + \ No newline at end of file diff --git a/projects/rock-paper-scissors-game/index.js b/projects/rock-paper-scissors-game/index.js new file mode 100644 index 0000000..4944f3e --- /dev/null +++ b/projects/rock-paper-scissors-game/index.js @@ -0,0 +1,42 @@ +const buttons = document.querySelectorAll("button"); + +const resultEl = document.getElementById("result"); + +const playerScoreEl = document.getElementById("user-score"); + +const computerScoreEl = document.getElementById("computer-score"); + +let playerScore = 0; +let computerScore = 0; + +buttons.forEach((button) => { + button.addEventListener("click", () => { + const result = playRound(button.id, computerPlay()); + resultEl.textContent = result; + + }); +}); + +function computerPlay() { + const choices = ["rock", "paper", "scissors"]; + const randomChoice = Math.floor(Math.random() * choices.length); + return choices[randomChoice]; +} + +function playRound(playerSelection, computerSelection) { + if (playerSelection === computerSelection) { + return "It's a tie!"; + } else if ( + (playerSelection === "rock" && computerSelection === "scissors") || + (playerSelection === "paper" && computerSelection === "rock") || + (playerSelection === "scissors" && computerSelection === "paper") + ) { + playerScore++; + playerScoreEl.textContent = playerScore; + return "You win! " + playerSelection + " beats " + computerSelection; + } else { + computerScore++; + computerScoreEl.textContent = computerScore; + return "You lose! " + computerSelection + " beats " + playerSelection; + } +} diff --git a/projects/rock-paper-scissors-game/style.css b/projects/rock-paper-scissors-game/style.css new file mode 100644 index 0000000..940eff4 --- /dev/null +++ b/projects/rock-paper-scissors-game/style.css @@ -0,0 +1,58 @@ +body { + background-color: #f1f1f1; + font-family: "Arial", sans-serif; + margin: 0; + padding: 0; +} + +h1 { + font-size: 2rem; + text-align: center; + padding-top: 100px; +} + +p { + font-size: 1.5rem; + font-weight: 600; + text-align: center; + margin-bottom: 0.5rem; +} + +.buttons { + display: flex; + justify-content: center; +} + +button { + border: none; + font-size: 3rem; + margin: 0 0.5rem; + padding: 0.5rem; + cursor: pointer; + border-radius: 5px; + transition: all 0.3s ease-in-out; +} + +button:hover { + opacity: 0.7; +} + +#rock { + background-color: #ff0000; +} + +#paper { + background-color: #2196f3; +} + +#scissors { + background-color: #4caf50; +} + +#user-score { + color: #2196f3; +} + +#computer-score { + color: #ff0000; +} diff --git a/projects/Sidebar-project/index.html b/projects/sidebar/index.html similarity index 100% rename from projects/Sidebar-project/index.html rename to projects/sidebar/index.html diff --git a/projects/Sidebar-project/index.js b/projects/sidebar/index.js similarity index 100% rename from projects/Sidebar-project/index.js rename to projects/sidebar/index.js diff --git a/projects/Sidebar-project/logo.svg b/projects/sidebar/logo.svg similarity index 100% rename from projects/Sidebar-project/logo.svg rename to projects/sidebar/logo.svg diff --git a/projects/Sidebar-project/styles.css b/projects/sidebar/styles.css similarity index 100% rename from projects/Sidebar-project/styles.css rename to projects/sidebar/styles.css diff --git a/projects/stopwatch/index.html b/projects/stopwatch/index.html new file mode 100644 index 0000000..05d8b2b --- /dev/null +++ b/projects/stopwatch/index.html @@ -0,0 +1,20 @@ + + + + + + + Stopwatch + + + + +
00:00:00
+
+ + + +
+ + + \ No newline at end of file diff --git a/projects/stopwatch/index.js b/projects/stopwatch/index.js new file mode 100644 index 0000000..0cbd647 --- /dev/null +++ b/projects/stopwatch/index.js @@ -0,0 +1,54 @@ +const timerEl = document.getElementById("timer"); +const startButtonEl = document.getElementById("start"); +const stopButtonEl = document.getElementById("stop"); +const resetButtonEl = document.getElementById("reset"); + +let startTime = 0; +let elapsedTime = 0; +let timerInterval; + +function startTimer() { + startTime = Date.now() - elapsedTime; + + timerInterval = setInterval(() => { + elapsedTime = Date.now() - startTime; + timerEl.textContent = formatTime(elapsedTime); + }, 10); + + startButtonEl.disabled = true; + stopButtonEl.disabled = false; +} + +function formatTime(elapsedTime) { + const milliseconds = Math.floor((elapsedTime % 1000) / 10); + const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000); + const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60)); + const hours = Math.floor(elapsedTime / (1000 * 60 * 60)); + return ( + (hours ? (hours > 9 ? hours : "0" + hours) : "00") + + ":" + + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + + ":" + + (seconds ? (seconds > 9 ? seconds : "0" + seconds) : "00") + + "." + + (milliseconds > 9 ? milliseconds : "0" + milliseconds) + ); +} +function stopTimer() { + clearInterval(timerInterval); + startButtonEl.disabled = false; + stopButtonEl.disabled = true; +} +function resetTimer() { + clearInterval(timerInterval); + + elapsedTime = 0; + timerEl.textContent = "00:00:00"; + + startButtonEl.disabled = false; + stopButtonEl.disabled = true; +} + +startButtonEl.addEventListener("click", startTimer); +stopButtonEl.addEventListener("click", stopTimer); +resetButtonEl.addEventListener("click", resetTimer); diff --git a/projects/stopwatch/style.css b/projects/stopwatch/style.css new file mode 100644 index 0000000..cf0859d --- /dev/null +++ b/projects/stopwatch/style.css @@ -0,0 +1,61 @@ +body { + background-color: #f0f0f0; + font-family: "Poppins", sans-serif; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 100vh; + overflow: hidden; + align-items: center; +} + +#timer { + font-size: 7rem; + font-weight: 700; + text-shadow: 2px 2px #f8a5c2; + color: #f92672; + width: 600px; + text-align: center; + margin: 40px auto; +} + +#buttons { + display: flex; + justify-content: center; +} + +button { + background-color: #f92672; + color: white; + border: none; + font-size: 2rem; + font-weight: bold; + padding: 1.5rem 4rem; + margin: 1rem; + border-radius: 30px; + cursor: pointer; + box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); + transition: all 0.2s; +} + +button:hover { + background-color: #f44583; + box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); +} + +button[disabled] { + opacity: 0.5; + cursor: default; +} + +@media (max-width: 800px) { + #timer { + font-size: 4rem; + width: 350px; + } + + button { + font-size: 1.5rem; + padding: 1rem 2rem; + } +} diff --git a/projects/temp-converter/icon.png b/projects/temp-converter/icon.png deleted file mode 100644 index 496496f..0000000 Binary files a/projects/temp-converter/icon.png and /dev/null differ diff --git a/projects/temp-converter/index.html b/projects/temp-converter/index.html deleted file mode 100644 index b4911a9..0000000 --- a/projects/temp-converter/index.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - - Temperature Convertor - - - -
-
-
Temperature Convertor
-
-
- - -
-
- - -
-
- - -
-
-
-
- - - - diff --git a/projects/temp-converter/script.js b/projects/temp-converter/script.js deleted file mode 100644 index 2876905..0000000 --- a/projects/temp-converter/script.js +++ /dev/null @@ -1,39 +0,0 @@ -// taking input element -const celsius =document.getElementById('celsius'); -const fahrenheit =document.getElementById('fahrenheit'); -const kelvin =document.getElementById('kelvin'); - -const input_box = document.getElementsByClassName('input_box'); - -for(let i=0; i + + + + + + Temperature Converter + + + +
+

Temperature Converter

+
+ + +
+
+ + +
+
+ + +
+
+ + + diff --git a/projects/temperature-converter/index.js b/projects/temperature-converter/index.js new file mode 100644 index 0000000..e2dfcf3 --- /dev/null +++ b/projects/temperature-converter/index.js @@ -0,0 +1,24 @@ +const celsiusEl = document.getElementById("celsius"); +const fahrenheitEl = document.getElementById("fahrenheit"); +const kelvinEl = document.getElementById("kelvin"); + +function computeTemp(event) { + const currentValue = +event.target.value; + + switch (event.target.name) { + case "celsius": + kelvinEl.value = (currentValue + 273.32).toFixed(2); + fahrenheitEl.value = (currentValue * 1.8 + 32).toFixed(2); + break; + case "fahrenheit": + celsiusEl.value = ((currentValue - 32) / 1.8).toFixed(2); + kelvinEl.value = ((currentValue - 32) / 1.8 + 273.32).toFixed(2); + break; + case "kelvin": + celsiusEl.value = (currentValue - 273.32).toFixed(2); + fahrenheitEl.value = ((currentValue - 273.32) * 1.8 + 32).toFixed(2); + break; + default: + break; + } +} diff --git a/projects/temperature-converter/style.css b/projects/temperature-converter/style.css new file mode 100644 index 0000000..ea02485 --- /dev/null +++ b/projects/temperature-converter/style.css @@ -0,0 +1,51 @@ +body { + margin: 0; + background: linear-gradient(to left bottom, lightgreen, lightblue); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + font-family: monospace; + color: darkcyan; +} + +.container { + background: rgba(255, 255, 255, 0.3); + padding: 20px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); + border-radius: 10px; + width: 85%; + max-width: 450px; + min-width: 350px; + display: flex; + flex-direction: column; + align-items: center; +} + +.heading { + font-size: 32px; +} + +.temp-container { + width: 100%; + padding: 15px; + font-weight: bold; + font-size: 18px; +} + +.input { + width: 220px; + font-family: monospace; + padding: 5px; + float: right; + outline: none; + background: rgba(255, 255, 255, 0.3); + border-color: rgba(255, 255, 255, 0.5); + color: darkgreen; + font-size: 18px; +} + + +.input::placeholder{ + color: darkgray; +} diff --git a/projects/tip-calculator/index.html b/projects/tip-calculator/index.html new file mode 100644 index 0000000..029457b --- /dev/null +++ b/projects/tip-calculator/index.html @@ -0,0 +1,28 @@ + + + + + + + Tip Calculator + + + +
+

Tip Calculator

+

Enter the bill amount and tip percentage to calculate the total.

+ + +
+ + +
+ +
+ + + +
+ + + \ No newline at end of file diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js new file mode 100644 index 0000000..98cb079 --- /dev/null +++ b/projects/tip-calculator/index.js @@ -0,0 +1,13 @@ +const btnEl = document.getElementById("calculate"); +const billInput = document.getElementById("bill"); +const tipInput = document.getElementById("tip"); +const totalSpan = document.getElementById("total"); + +function calculateTotal() { + const billValue = billInput.value; + const tipValue = tipInput.value; + const totalValue = billValue * (1 + tipValue / 100); + totalSpan.innerText = totalValue.toFixed(2); +} + +btnEl.addEventListener("click", calculateTotal); diff --git a/projects/tip-calculator/style.css b/projects/tip-calculator/style.css new file mode 100644 index 0000000..786e129 --- /dev/null +++ b/projects/tip-calculator/style.css @@ -0,0 +1,53 @@ +* { + box-sizing: border-box; +} + +body { + background-color: #f2f2f2; + font-family: "Helvetica", sans-serif; +} + +.container { + background-color: white; + max-width: 600px; + margin: 100px auto; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + border-radius: 10px; +} + +h1 { + margin-top: 0; + text-align: center; +} + +input { + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + margin: 10px 0; + width: 100%; +} + +button { + background-color: #4caf50; + color: white; + padding: 10px; + border: none; + cursor: pointer; + margin: 10px 0; + width: 100%; + font-size: 18px; + text-transform: uppercase; + transition: background-color 0.2s ease; +} + +button:hover { + background-color: #45a049; +} + +#total { + font-size: 24px; + font-weight: bold; + margin-top: 10px; +} diff --git a/projects/weather-app/index.html b/projects/weather-app/index.html new file mode 100644 index 0000000..7fe9e3a --- /dev/null +++ b/projects/weather-app/index.html @@ -0,0 +1,32 @@ + + + + + + + Weather App + + + +
+

Weather App

+
+ + +
+
+
+ +
+
+
+
+ +
+
+
+ + + diff --git a/projects/weather-app/index.js b/projects/weather-app/index.js new file mode 100644 index 0000000..f773a49 --- /dev/null +++ b/projects/weather-app/index.js @@ -0,0 +1,58 @@ +const apikey = "46f80a02ecae410460d59960ded6e1c6"; + +const weatherDataEl = document.getElementById("weather-data"); + +const cityInputEl = document.getElementById("city-input"); + +const formEl = document.querySelector("form"); + +formEl.addEventListener("submit", (event) => { + event.preventDefault(); + const cityValue = cityInputEl.value; + getWeatherData(cityValue); +}); + +async function getWeatherData(cityValue) { + try { + const response = await fetch( + `https://api.openweathermap.org/data/2.5/weather?q=${cityValue}&appid=${apikey}&units=metric` + ); + + if (!response.ok) { + throw new Error("Network response was not ok"); + } + + const data = await response.json(); + + const temperature = Math.round(data.main.temp); + + const description = data.weather[0].description; + + const icon = data.weather[0].icon; + + const details = [ + `Feels like: ${Math.round(data.main.feels_like)}`, + `Humidity: ${data.main.humidity}%`, + `Wind speed: ${data.wind.speed} m/s`, + ]; + + weatherDataEl.querySelector( + ".icon" + ).innerHTML = `Weather Icon`; + weatherDataEl.querySelector( + ".temperature" + ).textContent = `${temperature}°C`; + weatherDataEl.querySelector(".description").textContent = description; + + weatherDataEl.querySelector(".details").innerHTML = details + .map((detail) => `
${detail}
`) + .join(""); + } catch (error) { + weatherDataEl.querySelector(".icon").innerHTML = ""; + weatherDataEl.querySelector(".temperature").textContent = ""; + weatherDataEl.querySelector(".description").textContent = + "An error happened, please try again later"; + + weatherDataEl.querySelector(".details").innerHTML = ""; + } +} diff --git a/projects/weather-app/style.css b/projects/weather-app/style.css new file mode 100644 index 0000000..2030f24 --- /dev/null +++ b/projects/weather-app/style.css @@ -0,0 +1,94 @@ +body { + margin: 0; + font-family: "Montserrat", sans-serif; + background-color: #f7f7f7; +} + +.container { + background-color: #fff; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); + margin: 0 auto; + margin-top: 50px; + text-align: center; + max-width: 600px; + border-radius: 5px; + padding: 20px; +} + +form { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 20px; +} + +form input[type="text"] { + padding: 10px; + border: none; + outline: none; + font-size: 18px; + width: 60%; +} + +form input[type="submit"] { + background-color: #007bff; + color: #fff; + border: none; + padding: 10px 20px; + border-radius: 5px; + font-size: 18px; + cursor: pointer; + outline: none; + transition: background-color 0.3s ease; +} + +form input[type="submit"]:hover { + background-color: #0062cc; +} + +.icon img { + width: 100px; + height: 100px; + background-size: contain; + background-repeat: no-repeat; + background-position: center center; +} + +.temperature { + font-size: 48px; + font-weight: bold; + margin: 20px 0; +} + +.description{ + font-size: 24px; + margin-bottom: 20px; +} + +.details{ + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.details > div{ + padding: 20px; + background-color: #f1f1f1; + margin: 10px; + flex: 1; + border-radius: 5px; + text-align: center; + min-height: 45px; +} + +@media (max-width: 768px){ + form { + flex-direction: column; + } + + form input[type="text"]{ + width: 100%; + margin-bottom: 10px; + } +} diff --git a/projects/weight-converter/Assets/Assets.png b/projects/weight-converter/Assets/Assets.png deleted file mode 100644 index 576e299..0000000 Binary files a/projects/weight-converter/Assets/Assets.png and /dev/null differ diff --git a/projects/weight-converter/app.js b/projects/weight-converter/app.js deleted file mode 100644 index b992071..0000000 --- a/projects/weight-converter/app.js +++ /dev/null @@ -1,34 +0,0 @@ -const form = document.querySelector('form'); - - -//add an event listener to the form - -form.addEventListener('submit', function(e){ - e.preventDefault(); - const input = document.querySelector('input'); - let results = document.querySelector('span'); - let poundsToKG; - - if ((input.value <= 0) || (isNaN(input.value))){ - results.classList.add('error'); - results.innerHTML = "

Please enter a value number!

" - setTimeout(function(){ - results.innerHTML = ''; - - results.classList.remove('error'); - }, 2000) - input.value = ''; - } else { - poundsToKG = Number(input.value) / 2.2; - results.classList.add('no-error'); - results.innerHTML = `${poundsToKG.toFixed(2)}`; - setTimeout(function(){ - results.innerHTML = ''; - input.value = ''; - results.classList.remove('no-error'); - }, 10000) - - } - - -}) diff --git a/projects/weight-converter/index.html b/projects/weight-converter/index.html index 39e26e1..d441ffd 100644 --- a/projects/weight-converter/index.html +++ b/projects/weight-converter/index.html @@ -2,21 +2,21 @@ + - + Weight Converter - Weight Converstion Tool -
-
-

Weight Converter (pounds to kg)

-

Enter weight value in pounds:

- - -

Your weight in Kilograms is:

-
+
+

Weight Converter

+
+ + +
+

Your weight in kg is:

+

- + - + \ No newline at end of file diff --git a/projects/weight-converter/index.js b/projects/weight-converter/index.js new file mode 100644 index 0000000..faf2a44 --- /dev/null +++ b/projects/weight-converter/index.js @@ -0,0 +1,24 @@ +const inputEl = document.getElementById("input"); +const errorEl = document.getElementById("error"); +const resultEl = document.getElementById("result"); +let errorTime; +let resultTime; +function updateResults() { + if (inputEl.value <= 0 || isNaN(inputEl.value)) { + errorEl.innerText = "Please enter a valid number!"; + clearTimeout(errorTime); + errorTime = setTimeout(() => { + errorEl.innerText = ""; + inputEl.value = ""; + }, 2000); + } else { + resultEl.innerText = (+inputEl.value / 2.2).toFixed(2); + clearTimeout(resultTime); + resultTime = setTimeout(() => { + resultEl.innerText = ""; + inputEl.value = ""; + }, 10000); + } +} + +inputEl.addEventListener("input", updateResults); diff --git a/projects/weight-converter/style.css b/projects/weight-converter/style.css index 67bd921..e69936b 100644 --- a/projects/weight-converter/style.css +++ b/projects/weight-converter/style.css @@ -1,16 +1,42 @@ -form { - background-color: rgb(241, 9, 144); - color: white; - width: 500px; - height: 300px; - margin: 100px auto 100px; - padding: 25px; +body{ + margin: 0; + background: linear-gradient(to left top, yellow, lightblue, yellow); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + font-family: 'Courier New', Courier, monospace; + color: darkcyan; } -.error{ - color: red; +.container{ + background: rgba(255,255,255,0.3); + padding: 20px; + box-shadow: 0 4px 10px rgba(0,0,0,.3); + border-radius: 10px; + width: 85%; + max-width: 450px; +} + +.input-container{ + display: flex; + justify-content: space-between; + align-items: center; + font-size: 18px; + font-weight: 700; } -.no-error{ - color: rgb(6, 48, 2); +.input{ + padding: 10px; + width: 70%; + background: rgba(255,255,255,0.3); + border-color: rgba(255,255,255,0.5); + font-size: 18px; + border-radius: 10px; + color: darkgreen; + outline: none; } + +.error{ + color: red; +} \ No newline at end of file