#CodingChallenge

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

Bad #mastodon / #Misskey idea - make a #fediverse server software which is gamified (you get rewards for number of your posts, usage of 2fa, boosting or liking toots and so on... for example to unlock themes or idk)

#codingchallenge #gamify

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day10 : View Transitions API

Online demo :
https://teotimepacreau.github.io/View-Transitions-API-Day10-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/View-Transitions-API-Day10-Of-100DaysOfCode

Project goal :
- View Transitions API experimentation : understanding principle of implementation with VanillaJS .startViewTransition and DOMChanges activator

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

#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

Don't let special characters like parentheses, brackets, and quotation marks slow you down when coding. Check out our article on the Special Characters Typing Challenge to improve your skills!

https://typing12.com/typing-challanges/special-characters-typing-challenge

#programming #coding #typing #specialcharacters #accuracy #speed #efficiency #digitalage #jobmarket #skills #education #tech #learnprogramming #codingchallenge #typingtutorial #touchtyping #programminglanguages #codingcommunity

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

#javascriptquiz
What will be the output of the below code?
#programming #codingchallenge

#javascriptquiz
What will be the output of the below code?
#javascript #codingchallenge #programming

I've seen some suggestions (from links on the #AdventOfCode site) that talk about getting your toolset prepared before day 1. It's hard to do when I don't recognize the various algorithms the puzzles seem to be designed around.

Do you prepare a toolset prior? Did you learn the algorithms in an academic setting? If not, when you encountered them, has it been in real-world situations or just coding challenges?

#AdventOfCode2022 #PowerShell #CodingChallenge #DataStructures #DataAlgorithms

I had some by ref issues, but finally completed Advent of Code Day 5 "Binary Boarding" & Day 6 "Custom Customs". #adventofcode #adventofcode2020 #golang #codingchallenge

Der Ramer-Douglas-Peucker-Algorithmus in Processing (Java)

Es gibt eine neue Coding Challenge von Daniel Shiffman. Dieses Mal beschäftigt er sicvh mit einem mathematischen Problem, nämlich mit der Implementierung des Ramer-Douglas-Peucker-Algorithmus (RDP) in #Processing (Java). Es ist ein Algorithmus zur Kurvenglättung im Bereich der Vektorgrafik und Generalisierung von Karten. http://blog.schockwellenreiter.de/2019/10/2019102402.html #CrativeCoding #Tutorial #CodingChallenge

Coding Challenge: Der Zauberwürfel in Processing, Teil 3

Einen habe ich aber noch: Vor wenigen Tagen hatte uns Daniel Shiffman versprochen, daß er im nächsten Teil seiner monströsen #CodingChallenge, in der er in #Processing (Java) (mindestens) eine Künstliche Intelligenz entwickeln will, die den Zauberwürfel (#RubiksCube) lösen kann, die im zweiten Teil implementierten Drehbewegungen animiert. http://blog.schockwellenreiter.de/2019/04/2019041802.html #CreativeCoding

Ich habe mein Herz an Processing(.py) verloren

Heute ist Valentinstag und aus diesem Anlaß möchte Euch Daniel Shiffman zeigen, daß er sein Herz nicht in Heidelberg, sondern an #Processing (Java) verloren hat. Und so zeichnet er mit Processing die Herzkurve (Kardioide von griechisch καρδία, Herz) . Die Geraden sind die Verbindung einer Zahl auf dem Kreis mit der Zahl, die sich aus der Multiplikation der Ursprungszahl mit Zwei ergibt. http://blog.schockwellenreiter.de/2019/02/2019021402.html #CreativeCoding #CodingChallenge