Hi, my name is Eric Durand
I'm your next web Developer.

This exercise is a fully functional web Calculator. CSS is use to guide the user experience by using hover effects to show the buttons are functional, and providing feedback on button activation. CSS Grid is used to properly organize the button. A scroll bar was impleneted using overflow-X in the CSS, and a scroll wheel webkit for a better looking scroll bar on windows machines. DOM manipulation is used to change the display based on user input. A terinary operator is used to allow to add more numbers on the caluator display. Javascript runs the calculator logic to perform mathimatical operations, and update the display to show the result.

This exercise is a picture in picture web app. It utilizes the screen capture API's getDisplayMedia method to prompt the user to select a window to cast the contents of its display. The function is an async function that will await the user to select the display they are wanting to share. The media stream is passed into the video object as its source. The video will then begin to play in a picture in picture window. Sadly this will not work on a mobile device as most of the screen capture API is not compatible with mobile device web browsers.

This web page is a funny one. It tells Jokes! An animated GIF is used as the background of the page. When the "tell me a joke button" is clicked, a fetch request is sent to a joke API that is being used. An async function is used to await the data being fetched. Once recieved the data is then passed into a variable that is then passed into a speech API that is bneing used to tell the joke to the user auditorily. The free open source text to speech API was written in to the Javascript using the API's Source Development Kit.

This exercise is a web page that changes themes from a light theme to a dark theme. It uses the font awesome CDN for the icons. There are two sets of CSS variables with the colors assigned for each theme. Depending on the selected theme, the font awesome icon on the right of hte nav bar will change from a sun to a moon or vice versa. The scroll animation is actually a checkbox input that has been stlyed to resemble a circle that animates from left to right when checked. When the input is unchecked, it triggers the light mode them. When checked, it triggers the dark mode theme. Javascript is used to facilitate the theme switching by DOM manipulation.

This exercise is a a Book keeper web app, much like your typical browser favorites or bookmarks section. You can click on the links to open a new browser tab to the web site that has been bookmarked. The favicons are being populated dynamically using string template literal When the add bookmark button is activated, a modal is triggered to prompt the user to add the information for the bookmark. Form validation logic is used to handle the entered data (make sure the website URL follows the standard HTTP format) and validate the entry The bookmarks are then saved to local storage as a JSON object that can be fetched and set as the user adds more bookmarks. The user may also remove a book mark that will remove that object from local storage. Everytime a new bookmark is added or deleted, the DOM is manipulated to add or remove the bookmark card.

This exercise is a video player. HTML is used to make the video layout using font awesome for all of the video icons An open source asset is used for the video and can be changed to any other video a developer wishes to use. The progress bar is DIV element that was styled to resemble a progress bar CSS is used to position the container with the controls, the hover behavior, and the progress bar. Javascript use to create video playback functionality via several event listeners (click, canplay, timeupdate, change). The video pauses, plays, enlarges to full screen, has volume control, and playback speed. The progress bar updates as the video plays, and it is when clicked, the video will time skip to the point that was clicked.

This exercise is in form validation on the front end using the built in HTML validation and javascript. The container was centered and styled to resemble a sign up form with red outlines around each input field. HTML attributes were used to have placeholder text in each text box and the required attribute assign the desired text and patterns (for example, the pattern of a phone number with the dashes and amount of digits). Javascript is also used to assist in validation using the checkValidity method. There is a nested if else statement that will evaluate each input field to determine validity, and change the border color to either red of green and display a feedback message. once the submit event is triggered in the event listener for the form, the javascript validation is run. If all fields are valid, the data would then be stored. The form will not pass the data onto backend unless all input fields have been completed correctly as specified by our custom validation and javascript

This exercise is my first attempt at game logic. I use two free third party sources to import and require to make this app functional. The javascript uses the math.random method to have numbers chosen at random. The computer choice is a nested if else funtion with different threshholds that is assigned to each choice. If a the value of the decimal is below or equal to a certain established threshold, the value is assigned based on that. the rules of the game are objects that have several key value pairs that describe which choice defeats the other. They are defined as strings the strings are chosen based on the decimal resulted on math.random. A Javascript switch statment is used to determine which case is being used based on the play player selection, and will determine the icon change and which rule will be played against the randomly generated number. The game will keep track of the ammount of victories each side has, and display confetti animation if the player wins. There is also a reset button that will reset the game entirely to the intial onload values.

This exercise is a web page that uses infinite scroll, which is similar to what popular platforms like instagram and twitter use. It uses the unsplash API to supply the data and images for hte content. A free resource is used to have a loader animation that is shown in place while the API is being called to fetch the photos. CSS is used to center all of the elements on the page. The javascript calls the API using the fetch method within an async function. The elements are and dynamically created within the DOM using the forEach method. There is an eventlistener listening for the scroll event and constantly evaluating the position of the Y-axis. Once it reaches a certain hight, a new call is made to the API for more images which dynamically loads creating the look of an infinite scroll.

This web app uses the free NASA API to pull random astronomy pictures of the day The results are formatted into cards with an image, title, "add to favorites button" description, date and copy right information. A custom loading animation was incorporated as an overlay from a 3rd party resource that will show while data is being fetched from the API and stored into an array. CSS was used to center the loader container over the card container using position fixed, and a Z-index of 10. When the web site is launched, the loading animation is shown while the NASA API is pinged to fetch information using an async function. the DOM is then manipulated. A forEach method is used to loop over the array with the NASA API informtation to then create the elements and add classes and attributes. To improve loading time, lazy loading is used for the images. When all of the elements are created, the information is then appended into the DOM. Local storage is used to add cards to favorite using the setItem method. When a card is added to favorite, a confirmation message is flashed on the bottom right for two seconds showing it has been added using the setTimeout method.

This is a kanban board web page that has drag and drop functionality. The columns are an unordered list within an a div container that has been styled to resemble a card box. with a button added within the list item that has functionality built in to use DOM manipulation to create an input text box when activated. Once text has been added, javascript will dynamically add a list item into another unordered list withing the column. The javascript also has functionality that will allow the user to click, drag, and drop the list item into other labeled colums allowing the user to track progress of any given task. Each column has an empty array assigned to it that will contain content. When text is added, the push method is used to add the item into the column's assigned array index. The DOM is then manipulated, and the element created using the setAttribute method. To update the DOM, the forEach method was used to check the indecies of the array of each column and pass its value into a new element. a function was then created that uses a for loop to push the values of the new element To delete, the user would just delete the text from the box which would automatically remove that list item.

This is a splash page This exercise simulates the process of working with a designer through the Figma platform in order to create a splash page. FIGMA allows designers to share the assets with developers as well as specifying CSS styling for said assets. This allows for an easy way to hand off from a designer to a developer in order to create a live website. Three toggles were also added to the top that allow users to change the background. The background change is facilitated using a switch statement in javascript that will trigger a CSS class change to different themes. An if statement also facilitates the CSS class reset to go back to the original background color.

This exercise is a countdown timer. A video is being used for the background. The user is prompted to create a custome countdown and enter a title, and select a date. Once the date and title are set, the display changes to show a count down. When the countdown reaches zero, the display changes showing an complete message that has been animated using CSS Keyframes. Javascript handles the DOM manipulation and variable storage. The Date constructor was sued to compare current date and time with the stored data to determine if the countdown is complete or still counting down.

This exercise is my first web app created using React! The web app was created using just 4 components: a card component, a cardlist component, a scroll component, and a search box component. The card component is used to display user information (name and e-mail) The user information for the card was fetched from a json Object. The user images were retrieved from a free third party image app and populated into the card component. The user information and images are part of the cardlist component. When the app is rendered and the components mounts, it fetchs the and loops over the information from the placeholder for the cardlist, adding data into an empty array. That empty array will dynamically become our user cards. The search box component is an input box that uses the app's state to search through the props to filter the robots array to see if it includes the value currently in the input box. The scroll component is a functional component that wraps our card to keep the information in the center of the screen and the search box on top.

This is a fully functional, and deployed full stack web app. It is an express app that uses RESTful routing via Express Router, and functions as a CRUD app. MongoDB was used for the backend database. The separate pages are created using dynamic HTML with templating, each with their own random ID. EJS was used for the templating and looping through the MongoDB to populate and display data onto the templates. It has built in error handling using middleware that is both built in, and that was created specific for this web app. Cookies are used used to assist with session management. Authorization and authentication was implemented to allow the users to have their own secure accounts. Other users have the ability to add reviews to each others content, but they cannot edit or delete content that they did not create. The web app will also be secured from allowing users to do anything they want outside of the scope of the web app. A cluster map was also added and configued for the web app.