codedamn

Facing issues in challenges of 100-days-of-Frontend.

Asked by RAJAT AGRAWAL about 5 months ago

1

I am currently facing issues with the 100-Days-Of-Frontend challenge.

You can check the my query marked with orange color arrow marked in the picture.

Day 10 challenge Day 11 challenge

Why this is particularly happening with me only and in this challenge only ?

3 Answers

    0

    Hello Rajat,

    The labs you're referring to are self evaluative labs. These labs do not contain any test cases. You would have to go through the challenges listed on the page and manually review them yourself.

    Checking the challenges and marking the lab as done is equivalent to completing the lab successfully.

    screenshot

    @codedamn

    Codedamn

    @codedamn

    0

    Your screenshot is not visible on my scrren. It is not correctly applied in the code.

    But how to get green tick on these challenges as well like other challenges other icon is having green tick ?

    why I am not able to run tests for this challenge particularly ?

    There is a button that is saying - "Complete 6 more challenges to proceed".

    Can anyone help me out of this issue ?

    But how to mark as complete this challenge like others are going daily with green tick on the challenge icon outside ?

    Refer to scrrenshot attached.

    Day 10 challenge.

    Day 11 challenge.

    Thank you.

    @rajat310

    RAJAT AGRAWAL

    @rajat310

    0

    I am currently facing issues with the 100-Days-Of-Frontend challenge. Image Manipulation Lab Testcases:

    1. Create an 'img' element with the ID 'sampleImage' and set its 'src' to an image URL.
    2. Clicking on the scale button should increase the image scale by 10% and show scale factor text as 1.1 in the span#scale element exactly
    3. Clicking on the rotate button should rotate the image by 90 degrees
    4. Clicking on the reset button should bring back the image to the original size

    3rd testcase is not running. My Code: index.html

    <!DOCTYPE html> <html> <head> <title>Image Manipulation Lab</title> <style> div { margin-bottom: 4rem; }
    		#img-container {
    			display: flex;
    			align-items: center;
    			justify-content: center;
    		}
    	</style>
    </head>
    <body>
    	<div>
    		<button id="rotateButton">Rotate</button>
    		<button id="scaleButton">Scale</button>
    		<button id="resetButton">Reset</button>
    	</div>
    	<span id="scale">1.1</span>
    	<div id="img-container">
    		<img
    			id="sampleImage"
    			src="https://images.unsplash.com/photo-1541185933-ef5d8ed016c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8c3BhY2V4fGVufDB8fDB8fHww&w=350&q=100"
    		/>
    	</div>
    	<script src="script.js"></script>
    </body>
    
    </html>

    index.js let scale = 1; let rotatedeg = 0; var pic = document.getElementById("sampleImage"); var scaletext = document.getElementById("scale");

    document.getElementById("rotateButton").addEventListener('click', function () { rotatedeg = (rotatedeg + 90) % 360; scaletext.textContent = ${scale.toFixed(1)}x; pic.style.transform = rotate(${rotatedeg}deg) scale(${scale}); });

    document.getElementById("scaleButton").addEventListener('click', function () { scale += 0.1; scaletext.textContent = ${scale.toFixed(1)}x; pic.style.transform = rotate(${rotatedeg}deg) scale(${scale}); });

    document.getElementById("resetButton").addEventListener('click', function () { scale = 1; rotatedeg = 0; scaletext.textContent = ${scale.toFixed(1)}x; pic.style.transform = 'none'; });

    @nupur2001

    Nupur Sikka

    @nupur2001

Your answer