#codingday — Public Fediverse posts

Bist du glücklich, bin ich es auch. #CI #GitLab #Pipeline #CodingDay

Bist du glücklich, bin ich es auch. #CI #GitLab #Pipeline #CodingDay

#100DaysOfCode : #VanillaJS

#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

#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

#Day27 : Loop Exercices part II from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/Loop-Exercices-II-Day27-of-100DaysOfCode

- understood why it's necessary to put return in map array method
- array of arrays thanks to map and []
- reduce to combine to subArray to a string

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS

#100DaysOfCode : #VanillaJS

#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

#100DaysOfCode : #VanillaJS

#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

#100DaysOfCode : #VanillaJS

#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

#100DaysOfCode : #VanillaJS

#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

#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

#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

#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 #ViewTransitionsAPI

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day19 : Issue Tracker

Online demo :
https://teotimepacreau.github.io/Issue-Tracker-Day19-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Issue-Tracker-Day19-Of-100DaysOfCode

Project Goals :
- textArea length Checker with .length string property
- localStorage
- status updater is possible with a button that updates the JSON

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI

#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

#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

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day16 : DynamicTable Of Contents

Tuto by the great @cferdinandi

Online demo :
https://teotimepacreau.github.io/Dynamic-Table-of-content-Day16-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Table-of-content-Day16-Of-100DaysOfCode/blob/main/README.md

Project Goals :
- dynamic TOC by retrieving h2 ID's and then set anchor link
- Missing IDS are intentionnally set in
- User generate title

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment

#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

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day14 : Interactive Form

Online demo :
https://teotimepacreau.github.io/Interactive-Form-Day-14-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Interactive-Form-Day-14-of-100DaysOfCode/blob/main/README.md

Project goals :
- learning input, forms and radio buttons UI best practices
- form validation, error alerts, password visibility
- checking for best practices to control email, passwords

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day13 : Sliding Menu and Grid App View

Online demo :
https://teotimepacreau.github.io/Sliding-menu-and-grip-app-view-Day13-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Sliding-menu-and-grip-app-view-Day13-Of-100DaysOfCode

Project goals :
- lch() color function
- button alignment with ::before technique (vertical-align: middle) and UI principles of 2ex padding-inline for 1ex padding-block

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode

#100DaysOfCode : #HTML #CSS

#Day12 : Card Hover Reveal

Online demo :
https://teotimepacreau.github.io/Card-Hover-Reveal-Day12-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Card-Hover-Reveal-Day12-Of-100DaysOfCode

Project goals :
- div overlay up to 100% on hover with transition cubic-bezier
- transform: scale() in order to create the zoom effect
- z-index in order to put lettering above

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode #LearningDaily

#100DaysOfCode : #HTML #CSS

#Day11 : View Transitions API for MPA

Online demo :
https://teotimepacreau.github.io/View-Transitions-API-for-MPA-Day11-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/View-Transitions-API-for-MPA-Day11-of-100DaysOfCode

Project goals :
- HTML meta tags on both pages to unlock transitions API without JS
- Transition composed by opacity, left and transform scale

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode #LearningDaily #ViewTransitionsAPI

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day9 : Expandable FAQ

Online demo :
https://teotimepacreau.github.io/Expandable-FAQ-Day9-of-100DaysofCode/

Source Code : https://github.com/teotimepacreau/Expandable-FAQ-Day9-of-100DaysofCode

Project goals :
- VanillaJS closest selector and lastElementChild + DOM manipulation
- CSS use of linear gradient and box shadows
- multiple flexbox imbrication
- Font awesome icon toggle

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day8 : Glassmorphism split page

Online demo :
https://teotimepacreau.github.io/Split-Glassmorphism-Landing-Day8-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Split-Glassmorphism-Landing-Day8-of-100DaysOfCode

Goals :
- glassmorphism effect with CSS z-index, backdrop-filter, background-clip and box-shadow
- Vanilla JS add a class on mouseenter and remove class on mouseleave event
- CSS opacity and visibility transition for smooth

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day7 : Brutalist portfolio landing page and reveal animation

Online demo :
https://teotimepacreau.github.io/Brutalist-portfolio-landing-page-Day7-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Brutalist-portfolio-landing-page-Day7-of-100DaysOfCode

Goals :
- IntersectionObserver of VanillaJS to rerecreate scroll trigger without GSAP
- different CSS transition-delay on each line element to give the stagger feel
- CSS translateY, opacity and cubic-bezier

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment

#100DaysOfCode : #HTML #CSS #VanillaJS #GSAP

#Day6 : Text line filling opacity animation

Le projet est à retrouver sur :
https://teotimepacreau.github.io/Text-line-filling-animation-on-scroll-Day6-Of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Text-line-filling-animation-on-scroll-Day6-Of-100DaysOfCode

Goals :
- VanillaJS to add a line-mask div in each line (forEach and appendChild)
- line-mask CSS class with position absolute that cover the line from right to left with high opacity

@gsap
#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #Greensock

#100DaysOfCode : #HTML #CSS #VanillaJS #GSAP

#Day6 : Text line filling opacity animation

Le projet est à retrouver sur :
https://teotimepacreau.github.io/Text-line-filling-animation-on-scroll-Day6-Of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Text-line-filling-animation-on-scroll-Day6-Of-100DaysOfCode

Goals :
- VanillaJSto add a line-mask div in each line (forEach and appendChild)
- line-mask CSS class with position absolute that cover the line from right to left with high opacity

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #Greensock

#100DaysOfCode : #HTML #CSS #GSAP #JS

#Day5 : Text landing animation and variable font

Le projet est à retrouver sur :
https://teotimepacreau.github.io/Text-landing-animation-and-variable-fonts-Day5-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Text-landing-animation-and-variable-fonts-Day5-of-100DaysOfCode

Goals :
- word / line animation coming from bottom with opacity handled with GSAP fundamentals
- variable font discovery
smooth transition playing with weight of the font and color

@gsap #WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #Greensock

#100DaysOfCode : #HTML #CSS #VanillaJS seulement !

#Day4 : #SlidingMenu and art landing page

Le projet est à retrouver sur :
https://teotimepacreau.github.io/Sliding-Menu-and-art-landingpage-Day4-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Sliding-Menu-and-art-landingpage-Day4-of-100DaysOfCode

Goals :
- grid template areas
- position absolute and z-index for menu slider
- opacity transition
- mouse follower
- :hover and ::before to anim menu items
- Vanilla JS class toggle with click listener

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment

#100DaysOfCode : #HTML #CSS #VanillaJS seulement !

#Day3 : Effet de défausse et #ContainerQueries

Le projet est à retrouver sur : https://teotimepacreau.github.io/Discarding-effect-and-container-queries-Day3-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Discarding-effect-and-container-queries-Day3-of-100DaysOfCode

Goals :
- enabling dynamic and adaptive styling with container queries
- border-radius container handle images thanks to "overflow: hidden"
- discarding effect with translateX + rotate + scale

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment

#100DaysOfCode : #HTML #CSS #VanillaJS seulement !

#Day2 : Barre de progression évolutive accompagnée d'icônes

Le projet est à retrouver sur : https://teotimepacreau.github.io/Progress-Steps-Day2-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Progress-Steps-Day2-of-100DaysOfCode

Objectifs :
- position relative and position absolute to create the progress bar
- disabling and enabling buttons
- Cursor not-allowed and cursor pointer
- Vanilla JS IF logic

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment

#100DaysOfCode : #HTML #CSS #VanillaJS seulement !

#Day1 : Création de cartes extensibles pour contenir des images dynamiquement

Le projet est à retrouver sur : https://teotimepacreau.github.io/Expanding-Cards-Day1-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Expanding-Cards-Day1-of-100DaysOfCode

- handle images with object-fit: cover
- Vanilla JS eventListener, loops, class and attributes handling, create/remove DOM elements

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #LearningDaily #FrontendDevelopment #WebDevelopment