All solutions

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Maker-pre-launch-landing-page. I used HTML, CSS, JS.

What specific areas of your project would you like help with?

Feel free to leave any comment. Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Interactive-Card-details-form. I used HTML, CSS, JS.

What challenges did you encounter, and how did you overcome them?

I used a forEach loop to go through all the input and validate the form :

    Array.from(myForm).forEach( (item, index) => {
        if(!item.validity.valid){
}

And to display in real time modification with the input card number

document.querySelector('.card-member').innerText = `${array.splice(0, 4).join('')} ${array.splice(0, 4).join('')} ${array.splice(0, 4).join('')} ${array.splice(0, 4).join('')}`;

What specific areas of your project would you like help with?

Feel free to leave any comments.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Contact-form, I used HTML, CSS, JS.

What challenges did you encounter, and how did you overcome them?

It was to display an error message according to the input and to validate correctly the form.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Mortgage-repayment-calculator. I used HTML, CSS, JS.

What challenges did you encounter, and how did you overcome them?

It was to do the form, extract different values from the input then calculate the loan.

perMonth = (myForm[2].value * ((myForm[4].value/100)/12))/(1-(1+((myForm[4].value/100)/12))**-(myForm[3].value*12));

Finally display the result.

interest = setComma(interest);
perMonth = setComma(perMonth);
totalLoan = setComma(totalLoan);
const payment = myForm[5].checked ? `${perMonth}` : `${interest}`;

result.insertAdjacentHTML('afterbegin', addElementResult);

What specific areas of your project would you like help with?

Feel free to leave any comments.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Product-list-with-cart. I used HTML, CSS, JS.

What challenges did you encounter, and how did you overcome them?

It was challenging to do the JS, First I used await to fetch the JSON.

I set a addEventListener on the button Add to Cart to create a new button item.insertAdjacentHTML("afterend", divElement); which allows to decrement or increment the quantity .

I used a new object

arrayOrder[index] = {
    name: `${data[index].name}`,
    numberOfPlate: 1,
    totalPricePerPlate: (data[index].price * numberOfPlate).toFixed(2)
};

to keep memory of the number of plate and the total per item.

So after I can use this data to dynamically change the value on the website.

numberOfItem[i].children[1].children[0].innerText = `${arrayOrder[index].numberOfPlate}x`;
numberOfItem[i].children[1].children[2].innerText = `$${arrayOrder[index].totalPricePerPlate}`;

And I keep the same method to add or remove diiferent element on the website.

What specific areas of your project would you like help with?

I had a problem with :

const createConfirm = `
   ...
   Start New Order 
   ...

document.querySelector('.container').insertAdjacentHTML('afterend', createConfirm);` 

I used a new node and this onclick="newOrder(divMenu)" to init when you click on it. My problem was I can't init the value to 0.

Here my first function :

const newOrder = (element, array, total) => {

    initMenu(element);
    array = [];
    total = 0;

    document.querySelector('.order-confirmed').style.display = '';
    document.querySelector('.background').style.visibility = '';
    document.getElementById('number-item').innerText = 0;

    if(document.querySelector('.container-section .button-add-item'))
    {
        document.querySelector('.container-section .button-add-item').previousElementSibling.style.display = 'block';
        document.querySelector('.container-section .button-add-item').remove();
    }
};

and the button was onclick="newOrder(divMenu, arrayOrder, totalValue)"

And the value wasn't init to 0 and the array keep its value out of the function. What was I missing??

So I used location.reload(); to init all the page and the values.

Therefore, I don't understand the problem with this onclick function and how I can reset the values and keep them to 0 out of the function.

If you have any idea, feel free to leave any comments. Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Officelite-coming-soon-site. I used HTML, CSS , JS.

What challenges did you encounter, and how did you overcome them?

It was a complete challenge to do with different theme.

First, it was to create a select from scratch and have it work like a default one. I made it in HTML, CSS, JS and MDN Form helped me a lot.

I used the choice you can make with the 3 different subscription and used it on the next page to have an automatic choice on the select.

const url = window.location.href;
const regex = /plan=/;
let whichPlan = url.split(regex);
whichPlan = whichPlan.pop();

selectDefault.value = selectDefault[0].value;
inputSelectCustom.innerHTML = `${selectDefault.value} Pack Free`;

For the validty of the form I used

if(!myForm[i].validity.valid)

Finally create a timer which display every second down to the final date

setInterval( () => {
    minutes = Math.floor(((releaseDate - new Date()) % (1000 * 60 * 60)) / (1000 * 60));
    secondes = Math.floor(((releaseDate - new Date()) % (1000 * 60)) / (1000));
    arrayTimer[2] = minutes;
    arrayTimer[3] = secondes;
    setTimer.forEach((item, index) => {
    item.innerText = `${arrayTimer[index]}`;
    });
}, 1000);

What specific areas of your project would you like help with?

Feel free to leave any comments or suggestion to improve the code .

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Interactive-pricing-component. I used HTML, CSS , JS

What challenges did you encounter, and how did you overcome them?

The challenge was to stylize the input type="range" and have a correct behavior between firefox and chromium.

For firefox I didn't meet any problem, it was to make the progress bar within chromium, I struggled a lot to have a good behavior with.

Here my JS to have a progress bar within chromium.

progressBar.style.width = `calc(${Number(inputPrice.value) * 25}% - 1.25rem)`;

and with firefox I used CSS

input[type=range]::-moz-range-progress { 
    background: #A4F3EB;
    height: 100%;
    border-radius: 0.5rem;
}

I think next time I will try an other way to do the progress bar.

What specific areas of your project would you like help with?

Feel free to leave any comments or whether you know a way to do a progress bar in css with chromium.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi, here is my solution for Fylo-dark-theme-landing-page. I used HTML, CSS, JS.

What specific areas of your project would you like help with?

Feel free to leave any comments.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Tip-calculator-app. I used HTML, CSS, JS.

What specific areas of your project would you like help with?

Feel free to leave any comments.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Intro-section-with-dropdown-navigation. I used HTML, CSS, JS.

What challenges did you encounter, and how did you overcome them?

It was to display a menu when you click on it and using a .forEach to ease the JS.

What specific areas of your project would you like help with?

Feel free to leave any comments.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Single-page-design-portfolio. I used HTML, CSS, JS.

What challenges did you encounter, and how did you overcome them?

It was to create a carousel/slide for images with an infinite roll.

I changed the src of the image with an array that I roll, instead to change the position.

let arrayPath = [
    "./images/image-slide-1.jpg",
    "./images/image-slide-2.jpg",
    "./images/image-slide-3.jpg",
    "./images/image-slide-4.jpg",
    "./images/image-slide-5.jpg"
];

Array.from(arraySlide).forEach( (item, index) => 
     {
            item.src = arrayPath[index];
     }

What specific areas of your project would you like help with?

Feel free to leave any comments or suggestion.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Body-Mass-Index-Calculator. I used HTML, CSS, JS.

What challenges did you encounter, and how did you overcome them?

It was to change the form and display different input as you choose between metric and imperial units.

And it was to do some calculation with imperial unit.

What specific areas of your project would you like help with?

I created and set an element and wanted to check whether the element existe or not. So my first thought was if(displayForm.nextElementSibling === span) used different way ('span', ...). It was not working, finally I used a variable to do exception.

It's possible or not to check it with .nextElementSibling?

if(sibling === 0)
{
        const createSpan = document.createElement('span');
        createSpan.innerText = 'Error not a valid input';
        displayForm.insertAdjacentElement("afterend", createSpan);
        sibling = 1;
 }

Feel free to leave any comments or advise.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Coding-bootcamp-testimonials-slider. I used HTML, CSS, JS.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Pricing-component-with-toggle. I used HTML, CSS, JS.

What specific areas of your project would you like help with?

Feel free to leave any comments.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Social-media-dashboard. I used HTML, CSS, JS.

What challenges did you encounter, and how did you overcome them?

It was to create a dark theme for the first time switching between background-color and color.

Array.from(figure).forEach( (item) =>  item.style.color = '#fff' );

And create a border with a gradient, I finally used linear-gradient with a background.

What specific areas of your project would you like help with?

Feel free to leave any comments. I need some advices to improve my JS and readibility.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Project-tracking-intro. I used HTML, CSS , JS.

What are you most proud of, and what would you do differently next time?

Hi, here is my solution using HTML, CSS, JS.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Loopstudios-landing-page. I used HTML, CSS , JS.

What challenges did you encounter, and how did you overcome them?

To display a menu and an overlay.

What specific areas of your project would you like help with?

Some tips to improve my code are welcome.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Crowdfunding-product-page. I used HTML, CSS, JS.

What challenges did you encounter, and how did you overcome them?

It was to display the good page and transfer the information in order to modificate the data on the main page.

Reach different parent and child nodes

arraySelect[i].firstElementChild.firstElementChild.classList.add('button-project-click');
arraySelect[i].firstElementChild.childNodes[3].style.color = '#3CB3AB';
arraySelect[i].parentElement.style.border = '0.15rem #3CB3AB solid';

What specific areas of your project would you like help with?

It's to have some tips to improve my JS and have more readibility and shorter code.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Blogr-landing-page.

I used HTML, CSS, Flex, Grid, JS.

What challenges did you encounter, and how did you overcome them?

It was to reach ::after element with JS and modificate the property transform.

document.styleSheets[1].cssRules[12].style.transform = 'rotate(180deg)'

with an id to reach the one I need.

What specific areas of your project would you like help with?

I think I will do different next time and use a div instead of ::after . It will me to improve readibility of my code.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Sunnyside-agency-landing-page. I used HTML, CSS, JS.

What challenges did you encounter, and how did you overcome them?

It was to have a good behvior between all the images and different size, so I used different @media screen to keep a good behavior in relation with the screen size.

What specific areas of your project would you like help with?

Feel free to leave any comment.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Time-tracking-dashboard using HTML, CSS, Grid and Flex, JS, mobile-first.

What challenges did you encounter, and how did you overcome them?

It was to extract data with fetch API and display it in the correct item.

fetch('./data.json').then( res => res.json())
                    .then( (data) =>  {
                        array = data;
                    });

What specific areas of your project would you like help with?

I used .forEach to iterate through the data and set it.

previous.forEach( (item, index) => { 
   item.innerText = `Last Week - ${array[index].timeframes.daily.previous}hrs`;
 });  

Can you tell me how to improve the code.

Thanks.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Expenses-chart-component. I used HTML, CSS and JS.

What challenges did you encounter, and how did you overcome them?

The challenge was to extract data from JSON file and display it in the graph when you go over with the pointer.

What specific areas of your project would you like help with?

I did some research on the net and trying to remember that I learned.

Here is my solution to fetch the data then use it to set height, amount.

And display a different color for the day of the week :

fetch('./data.json')
                .then(res => res.json())
                .then((file) => {
                    for(data of file)
                    {
                        day[i].innerText = `$${data.amount}`;          
                        week[i].style.height = `${data.amount/5}rem`
                        week[whatDay].style.backgroundColor = 'hsl(186, 34%, 60%)';        
                        i++;
                    }
                });

If you mind telling how I can improve my code, it's working as I like but a better solution for JS.

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Notifications-page.

What challenges did you encounter, and how did you overcome them?

I used HTML, CSS, JS and flex. For JS I used an addEventListener with click and classList.remove to uncheck the notification.

What specific areas of your project would you like help with?

Any feedback are welcome>

Thanks.