#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS
#Day41 : Beginned email template in Newsletter Express project
Source Code : https://github.com/teotimepacreau/Express-Newsletter
Learned :
-inline styles
-html tag <style>
-email HTML current state : can get rid of tables if using divs. Still need to learn more about the support of semantic html elements
#WebDev #Frontend #CSS #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS #emailgeeks
#100daysofcode #nodejs #express #sqlite #vanillajs #day41 #webdev #frontend #css #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js #emailgeeks
#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS
#Day40 : Added unsubscription logic and SQL handling in Newsletter Express project
Source Code : https://github.com/teotimepacreau/Express-Newsletter
Added :
- Unsubscription logic : Create a route for users to unsubscribe from the newsletter. Update the database accordingly.
Learned :
-async await handling of errors in Express, require to try catch and next to a middleware
#WebDev #Frontend #CSS #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #nodejs #express #sqlite #vanillajs #day40 #webdev #frontend #css #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS
#Day39 : Continuing Newsletter Express project with several UI changes
Source Code : https://github.com/teotimepacreau/Express-Newsletter
Added :
- modified homepage
- unsubscribe page
- beginned unsub route but i need to add SQL DELETE for the email
#WebDev #Frontend #CSS #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #nodejs #express #sqlite #vanillajs #day39 #webdev #frontend #css #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS
#Day38 : Newsletter building
Source Code : https://github.com/teotimepacreau/Express-Newsletter
Learned :
- intro to Backend : learned basics of NodeJS, Express and SQL
- Express subscription routes : adding entries from the user to an SQLite database
- Displaying notif if the entries are correctly added
#WebDev #Frontend #CSS #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #nodejs #express #sqlite #vanillajs #day38 #webdev #frontend #css #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
#Day33 :Classes Exercices from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Classes-Exercice-Day34-of-100DaysOfCode/tree/main
Learning :
- class allows to create an object with built in properties
- class `constructor` is the better way to add properties
- this
- class extending to create child objects of the class that herits properties
- `constructor` and `super` to rewrite or add properties to the child class
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #vanillajs #day33 #30daysofjavascript #webdev #frontend #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
#Day32 : Sets and Maps Exercices from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Sets-and-Maps-Exercices-Day32-Of-100DaysOfCode
- `Set` to get unique elements from an array
- `Map` to organize array in objects using as we want keys
- find unique values in a big array combinating `map` array method, flattening and `Set`
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #vanillajs #day32 #30daysofjavascript #webdev #frontend #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
#Day31 : Higher Order Functions Exercices from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Higher-Order-Functions-Exercices-Day31-Of-100DaysOfCode
- concatenate strings with reduce
- some, every array method
-populating an object : using a combination of storing object, for...of loop, sort, slice, map
-create object with bracket notation storingObject[key] = value
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #vanillajs #day31 #30daysofjavascript #webdev #frontend #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
#Day30 : Object Exercices from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Object-Exercices-Day30-Of-100DaysOfCode
- using for in loops and understanding that it requireds the [index] of the item
- using .every() array method that return a true or false
- structuredClone() to deep copy an object
using Object.keys, Object.values, Object.entries and array destructuring
.find() array method
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #vanillajs #Day30 #30daysofjavascript #webdev #frontend #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
#Day29 : Loop Exercices part III from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Loop-Exercices-III-Day29-of-100DaysOfCode
- reminded filter and map array methods
used for...of, forEach loops
- copied an array to avoid mutation
- push into an array if a condition is met
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS
#100daysofcode #vanillajs #day29 #30daysofjavascript #webdev #frontend #webdesign #learnwebdev #javascript #learntocode #codingday #frontenddevelopment #codingchallenge #learncode #webdevelopment #learnjavascript #js
#Day28 : Array Exercices part III from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Array-Methods-Exercices-III-Day28-of-100DaysOfCode
- array destructuring with... in order to use Math.min() and Math.max() (because they only works on numbers and not on an array)
- reduce in order to calculate a sum of elements necessary to an average
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS
#100daysofcode #vanillajs #day28 #30daysofjavascript #webdev #frontend #webdesign #learnwebdev #javascript #learntocode #codingday #frontenddevelopment #codingchallenge #learncode #webdevelopment #learnjavascript #js
#Day26 : Array Methods partII from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Array-Methods-Exercices-II-Day26-of-100DaysOfCode
- import and export arrays from separate files
- replace string method to - remove string elements
- split string method to put each element in an array
- filter out one element of an array
- sort ascendantly
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS
#js #learnjavascript #webdevelopment #learncode #codingchallenge #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #30daysofjavascript #Day26 #vanillajs #100daysofcode
#Day25 : Functions Exercices from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Function-exercices-Day25-of-100DaysOfCode
- reminded multiple parameters
- concatenation of string, math operations
- multiple if conditions
switch/case statements in order to take several conditions
- looping through an array and displaying each entries
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS
#js #learnjavascript #webdevelopment #learncode #codingchallenge #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #30daysofjavascript #Day25 #vanillajs #100daysofcode
#Day24 : Loop Exercices from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Loop-exercices-Day24-of-100DaysOfCode
- constraint number of iterations with for(i=0; i<=array.length; i++)
reverse iteration with for(i=countries.length-1; i>=0 ; i--)
- repeat() string method associated with for(i)
- generate a random 6 characters ID
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS
#js #learnjavascript #webdevelopment #learncode #codingchallenge #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #30daysofjavascript #Day24 #vanillajs #100daysofcode
#Day23 : Array Methods Exercices from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Array-Methods-Exercices-Day23-of-100DaysOfCode
- understood the difference between .map() and forEach() method
- used .includes() for first time to verif if the array contains certain letters
- used .filter() for first time
reverse array
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS
#js #learnjavascript #webdevelopment #learncode #codingchallenge #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #30daysofjavascript #day23 #vanillajs #100daysofcode
#100DaysOfCode : #HTML #CSS #VanillaJS
#Day22 : Microblog
Online demo :
https://teotimepacreau.github.io/Callback-blog-Day22-Of-100DaysOfCode/
Source Code : https://github.com/teotimepacreau/Callback-blog-Day22-Of-100DaysOfCode
Project goals :
- use of callbacks, split string method, Map array method, Object.assign method
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI
#js #learnjavascript #webdevelopment #learncode #codingchallenge #dailyui #uitrend #uidesign #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #day22 #vanillajs #css #html #100daysofcode
#100DaysOfCode : #HTML #CSS #VanillaJS
#Day21 : Drag and drop
Online demo :
https://teotimepacreau.github.io/Drag-and-drop-Day21-of-100DaysOfCode/
Source Code : https://github.com/teotimepacreau/Drag-and-drop-Day21-of-100DaysOfCode
Project goals :
- discovering the drag and drop API
- first approach to setting data into an object in order to keep properties
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI
#js #learnjavascript #webdevelopment #learncode #codingchallenge #dailyui #uitrend #uidesign #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #Day21 #vanillajs #css #html #100daysofcode
#100DaysOfCode : #HTML #CSS #VanillaJS
#Day20 : Bookmark reader using only Raindrop.io API
Inspired by the excellent design and functionality from @iamrobin https://www.iamrob.in/bookmarks
Online demo :
https://teotimepacreau.github.io/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode/
Source Code : https://github.com/teotimepacreau/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode
Project goals ↓
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI
#js #learnjavascript #webdevelopment #learncode #codingchallenge #dailyui #uitrend #uidesign #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #Day20 #vanillajs #css #html #100daysofcode
#100DaysOfCode : #HTML #CSS #VanillaJS
#Day18 : Github profile insights
Tuto by the great @cferdinandi
Online demo :
https://teotimepacreau.github.io/My-Github-Insights-Day18-of-100DaysOfCode/
Source Code : https://github.com/teotimepacreau/My-Github-Insights-Day18-of-100DaysOfCode
Project Goals :
- handle multiple API endpoints chaining promises method
- array destructuring, .map(), .join()
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS
#js #learnjavascript #webdevelopment #learncode #codingchallenge #dailyui #uitrend #uidesign #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #Day18 #vanillajs #css #html #100daysofcode
#100DaysOfCode : #HTML #CSS #VanillaJS
#Day17 : List Randomizer
Tuto by the great @cferdinandi
Online demo :
https://teotimepacreau.github.io/Grocery-List-Randomizer-Day17-of-100DaysOfCode/
Source Code : https://github.com/teotimepacreau/Grocery-List-Randomizer-Day17-of-100DaysOfCode
Project Goals :
- FormData JS object
- users can add item, select a random item and see a toast notification
- localStorage
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS
#js #learnjavascript #webdevelopment #learncode #codingchallenge #dailyui #uitrend #uidesign #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #Day17 #vanillajs #css #html #100daysofcode
#100DaysOfCode : #HTML #CSS #VanillaJS
#Day15 : Popover API and Anchor Positionning
Tuto by the great @jhey
Online demo :
https://teotimepacreau.github.io/Popover-API-and-Anchor-Positioning-Day15-of-100DaysOfCode/
Source Code : https://github.com/teotimepacreau/Popover-API-and-Anchor-Positioning-Day15-of-100DaysOfCode
Project goals :
- Popover API
- Anchor positioning to avoid position absolute
- Best UI practices for dropdown
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #Front #Components
#components #front #webdevelopment #learncode #codingchallenge #dailyui #uitrend #uidesign #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #day15 #vanillajs #css #html #100daysofcode