Colorful Flexbox Design<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background-color: #1e1e2f; \/* Dark background for contrast *\/\n font-family: Arial, sans-serif;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n width: 600px;\n height: 600px;\n border: 2px solid #444;\n border-radius: 12px;\n overflow: hidden;\n }\n\n header {\n background-color: #ff6f61; \/* Vibrant coral *\/\n color: #fff;\n padding: 1rem;\n text-align: center;\n }\n\n main {\n display: flex;\n flex: 1;\n padding: 1rem;\n gap: 1rem;\n background-color: #5b5f97; \/* Deep purple *\/\n }\n\n .sidebar {\n flex: 1;\n background-color: #ffcc00; \/* Bright yellow *\/\n color: #333;\n padding: 1rem;\n border-radius: 8px;\n }\n\n .content {\n flex: 2;\n background-color: #2ec4b6; \/* Fresh teal *\/\n color: #fff;\n padding: 1rem;\n border-radius: 8px;\n }\n\n footer {\n background-color: #e63946; \/* Vibrant red *\/\n color: #fff;\n text-align: center;\n padding: 1rem;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>Colorful Flexbox Layout<\/h1>\n <\/header>\n <main>\n <div class=\"sidebar\">\n <h2>Sidebar<\/h2>\n <p>This is the sidebar content with a vibrant yellow background.<\/p>\n <\/div>\n <div class=\"content\">\n <h2>Main Content<\/h2>\n <p>This is the main content area with a fresh teal background.<\/p>\n <\/div>\n <\/main>\n <footer>\n <p>© 2025 Colorful Design<\/p>\n <\/footer>\n <\/div>\n<\/body>\n<\/html>\n","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Color Palette: Header: #ff6f61 (Coral Red) Sidebar: #ffcc00 (Bright Yellow) Main Content: #2ec4b6 (Fresh Teal) Main Section Background: #5b5f97 (Deep Purple) Footer: #e63946 (Vibrant Red) Body Background: #1e1e2f (Dark Gray-Blue)","starterCode":"\/\/do your design here","category":"Flex_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"flex2","title":"Flex Task 2","order":"400","problemStatement":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Task Management Dashboard<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: Arial, sans-serif;\n background-color: #121212; \/* Dark Gray Background *\/\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n padding: 20px;\n }\n\n .dashboard {\n display: flex;\n flex-direction: column;\n gap: 15px;\n width: 100%;\n max-width: 600px; \/* Set width to 600px *\/\n max-height: 600px; \/* Set height to 600px *\/\n background-color: #1e1e1e; \/* Slightly darker gray for the container *\/\n border-radius: 12px;\n padding: 15px;\n overflow-y: auto; \/* Allow scroll if content overflows *\/\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px;\n background-color: #1976d2; \/* Blue Header *\/\n border-radius: 10px;\n }\n\n .header h1 {\n font-size: 1.3rem;\n word-wrap: break-word;\n }\n\n .header button {\n background-color: #fbc02d; \/* Yellow Button *\/\n color: black;\n padding: 8px 16px;\n border: none;\n border-radius: 5px;\n font-weight: bold;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n\n .header button:hover {\n background-color: #f9a825; \/* Darker Yellow on Hover *\/\n }\n\n .tasks {\n display: flex;\n gap: 15px;\n justify-content: space-between;\n flex-wrap: wrap; \/* Allow tasks to wrap within the available space *\/\n }\n\n .column {\n flex: 1;\n min-width: 120px; \/* Set minimum width to ensure responsive layout *\/\n max-width: 180px; \/* Set maximum width for columns *\/\n display: flex;\n flex-direction: column;\n gap: 12px;\n background-color: #333333; \/* Dark Gray Card Background *\/\n border-radius: 8px;\n padding: 12px;\n overflow-y: auto;\n }\n\n .column h2 {\n text-align: center;\n background-color: #388e3c; \/* Green Header for Columns *\/\n padding: 8px;\n border-radius: 6px;\n font-size: 1.1rem;\n }\n\n .task {\n padding: 10px;\n background-color: #8e24aa; \/* Purple Task Background *\/\n border-radius: 6px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n font-size: 0.9rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n }\n\n .task:hover {\n background-color: #7b1fa2; \/* Darker Purple on Hover *\/\n }\n\n .task button {\n background-color: #0288d1; \/* Blue Button for Actions *\/\n color: white;\n border: none;\n padding: 6px 10px;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n\n .task button:hover {\n background-color: #0277bd; \/* Darker Blue on Hover *\/\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"dashboard\">\n \n <div class=\"header\">\n <h1>Task Management<\/h1>\n <button>Add New Task<\/button>\n <\/div>\n\n \n <div class=\"tasks\">\n \n <div class=\"column\">\n <h2>To Do<\/h2>\n <div class=\"task\">\n <span>Design the homepage<\/span>\n <button>Start<\/button>\n <\/div>\n <div class=\"task\">\n <span>Write API documentation<\/span>\n <button>Start<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"column\">\n <h2>In Progress<\/h2>\n <div class=\"task\">\n <span>Develop user authentication<\/span>\n <button>Finish<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"column\">\n <h2>Done<\/h2>\n <div class=\"task\">\n <span>Setup project repo","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Background Color: #121212 (Dark Gray) for the body and #1e1e1e for the dashboard container. Header Background: #1976d2 (Blue). Button Color (Main): #fbc02d (Yellow). Button Hover: #f9a825 (Darker Yellow). Column Header (Green): #388e3c. Task Background: #8e24aa (Purple). Task Hover: #7b1fa2 (Darker Purple). Button Inside Task: #0288d1 (Blue).","starterCode":"\/\/do the design here","category":"Flex_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":null},{"id":"flex3","title":"Flex Task 3","order":"400","problemStatement":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Responsive Product Cards<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Arial', sans-serif;\n background-color: #2c3e50; \/* Dark Blue background *\/\n color: #ecf0f1; \/* Light text color *\/\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n padding: 20px;\n }\n\n .product-container {\n display: flex;\n flex-wrap: wrap;\n gap: 20px; \/* Space between cards *\/\n justify-content: center;\n max-width: 600px; \/* Limit width to 600px *\/\n max-height: 600px; \/* Limit height to 600px *\/\n margin: 0 auto;\n overflow: hidden; \/* Prevent overflow *\/\n }\n\n .product-card {\n background-color: #34495e; \/* Dark gray background for cards *\/\n border-radius: 10px;\n overflow: hidden;\n width: calc(33% - 20px); \/* Three cards per row with some gap *\/\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);\n transition: transform 0.3s ease-in-out;\n }\n\n .product-card:hover {\n transform: translateY(-10px); \/* Hover effect *\/\n }\n\n .product-info {\n padding: 15px;\n }\n\n .product-title {\n font-size: 1.1rem;\n font-weight: bold;\n color: #f39c12; \/* Orange color for title *\/\n margin-bottom: 10px;\n }\n\n .product-description {\n font-size: 0.9rem;\n color: #bdc3c7; \/* Lighter gray for description *\/\n margin-bottom: 10px;\n }\n\n .product-price {\n font-size: 1.2rem;\n font-weight: bold;\n color: #e74c3c; \/* Red color for price *\/\n }\n\n \/* Responsive Styles *\/\n @media (max-width: 480px) {\n .product-card {\n width: 100%; \/* One card per row on small screens *\/\n }\n }\n\n <\/style>\n<\/head>\n<body>\n\n <div class=\"product-container\">\n \n <div class=\"product-card\">\n <div class=\"product-info\">\n <h3 class=\"product-title\">Product One<\/h3>\n <p class=\"product-description\">This is a brief description of product one. It has various features.<\/p>\n <p class=\"product-price\">$49.99<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card\">\n <div class=\"product-info\">\n <h3 class=\"product-title\">Product Two<\/h3>\n <p class=\"product-description\">Product two offers great value with amazing features for your needs.<\/p>\n <p class=\"product-price\">$79.99<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card\">\n <div class=\"product-info\">\n <h3 class=\"product-title\">Product Three<\/h3>\n <p class=\"product-description\">This product is highly recommended for its quality and performance.<\/p>\n <p class=\"product-price\">$99.99<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n<\/body>\n<\/html>\n","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Body Background: #2c3e50 (Dark Blue) Product Card Background: #34495e (Dark Gray) Text Color: #ecf0f1 (Light Gray for the text) Product Title: #f39c12 (Bright Orange) Product Price: #e74c3c (Red) Product Description: #bdc3c7 (Light Gray)","starterCode":"\/\/do design here","category":"Flex_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"grid1","title":"Grid Task 1","order":"400","problemStatement":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" \/> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/> <title>Document<\/title> <style> body { margin: 0; padding: 0; } .container { border: 6px solid black; display: grid; grid-template: repeat(3, 94px) \/ repeat(3, 194px); width: 600px; height: 300px; } .grid-items { text-align: center; padding: 1rem; font-size: 1rem; color: white; } .item1 { background-color: #ffa500; justify-self: start; } .item2 { background-color: rgb(169, 139, 82); align-self: start; } .item3 { background-color: rgb(34, 49, 30); justify-self: end; } .item4 { background-color: rgb(92, 46, 207); place-self: center; } .item5 { background-color: rgb(5, 4, 3); } .item6 { background-color: rgb(206, 17, 124); place-self: center; } .item7 { background-color: rgb(53, 248, 235); justify-self: start; } .item8 { background-color: rgb(16, 135, 74); align-self: end; } .item9 { background-color: rgb(216, 54, 54); justify-self: end; } <\/style> <\/head> <body> <div class=\"container\"> <div class=\"grid-items item1\">Item 1<\/div> <div class=\"grid-items item2\">Item 2<\/div> <div class=\"grid-items item3\">Item 3<\/div> <div class=\"grid-items item4\">Item 4<\/div> <div class=\"grid-items item5\">Item 5<\/div> <div class=\"grid-items item6\">Item 6<\/div> <div class=\"grid-items item7\">Item 7<\/div> <div class=\"grid-items item8\">Item 8<\/div> <div class=\"grid-items item9\">Item 9<\/div> <\/div> <\/body> <\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"colors used:#ffa500 (orange) - Used in .item1 rgb(169, 139, 82) (brownish) - Used in .item2 rgb(34, 49, 30) (dark green) - Used in .item3 rgb(92, 46, 207) (purple) - Used in .item4 rgb(5, 4, 3) (dark gray) - Used in .item5 rgb(206, 17, 124) (pink) - Used in .item6 rgb(53, 248, 235) (cyan) - Used in .item7 rgb(16, 135, 74) (green) - Used in .item8 rgb(216, 54, 54) (red) - Used in .item9","starterCode":"<!DOCTYPE html><html><head><style><\/style><\/head><body><\/body><\/html>","category":"Grid_Box","difficulty":"medium","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"grid2","title":"Grid Task 2","order":"400","problemStatement":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Complex Window Design<\/title> <style> body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #ecf0f1; display: flex; align-items: center; justify-content: center; height: 100vh; } .window { width: 600px; min-height: 300px; background-color: #ffffff; border: 1px solid #bdc3c7; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; flex-direction: column; } .window-header { background-color: #3498db; color: #ffffff; padding: 12px; text-align: center; border-top-left-radius: 8px; border-top-right-radius: 8px; } .close-button { background-color: #e74c3c; color: #fff; border: none; padding: 8px; border-radius: 4px; cursor: pointer; margin-left: auto; } .window-content { padding: 20px; flex-grow: 1; } .button { display: inline-block; padding: 10px 20px; font-size: 16px; margin: 10px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } .button-primary { background-color: #3498db; color: #ffffff; } .button-secondary { background-color: #2ecc71; color: #ffffff; } <\/style> <\/head> <body> <div class=\"window\"> <div class=\"window-header\"> <span>Complex Window<\/span> <button class=\"close-button\" onclick=\"closeWindow()\">X<\/button> <\/div> <div class=\"window-content\"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni sit ut nobis molestias nesciunt sunt eaque autem necessitatibus, earum vero minus tempore adipisci totam, quia corrupti debitis quas est. Ut.<\/p> <button class=\"button button-primary\">Primary Button<\/button> <button class=\"button button-secondary\">Secondary Button<\/button> <\/div> <\/div> <\/body> <\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"colors used:Body background color: #ecf0f1 Window background color: #ffffff Window border color: #bdc3c7 Window header background color: #3498db Window header text color: #ffffff Close button background color: #e74c3c Close button text color: #fff Primary button background color: #3498db Primary button text color: #ffffff Secondary button background color: #2ecc71 Secondary button text color: #ffffff","starterCode":"<!DOCTYPE html><html><head><style><\/style><\/head><body><\/body><\/html>","category":"Grid_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"grid3","title":"Grid Task 3","order":"400","problemStatement":"<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <style> body { margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #f0f0f0; } .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; width: 600px; height: 300px; border: 2px solid #333; border-radius: 8px; overflow: hidden; } .grid-item { padding: 20px; box-sizing: border-box; text-align: center; background-color: #d3d3d3; border-radius: 8px; } .grid-item:nth-child(odd) { background-color: #a9a9a9; } <\/style><\/head><body><div class=\"grid-container\"> <div class=\"grid-item\">Item 1<\/div> <div class=\"grid-item\">Item 2<\/div> <div class=\"grid-item\">Item 3<\/div> <div class=\"grid-item\">Item 4<\/div> <div class=\"grid-item\">Item 5<\/div> <div class=\"grid-item\">Item 6<\/div><\/div><\/body><\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"colors used : Background color of the body: background-color: #f0f0f0; (light gray) Background colors of the grid items: Odd-numbered items: background-color: #d3d3d3; (light gray) Even-numbered items: background-color: #a9a9a9; (dark gray) Border color of the grid container: border: 2px solid #333; (black)","starterCode":"<!DOCTYPE html><html><head><style><\/style><\/head><body><\/body><\/html>","category":"Grid_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"grid4","title":"Grid Task 4","order":"400","problemStatement":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Different Window Design<\/title> <style> body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #2c3e50; display: flex; align-items: center; justify-content: center; height: 100vh; } .window { width: 400px; height: 300px; background-color: #34495e; border: 2px solid #2c3e50; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; color: #ecf0f1; } .header { background-color: #3498db; padding: 15px; text-align: center; font-size: 24px; border-bottom: 2px solid #2c3e50; } .content { flex-grow: 1; padding: 20px; line-height: 1.6; } .footer { background-color: #3498db; padding: 15px; text-align: center; border-top: 2px solid #2c3e50; } .button { padding: 10px 20px; margin: 10px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; } .button-primary { background-color: #e74c3c; color: #ffffff; } .button-secondary { background-color: #27ae60; color: #ffffff; } <\/style> <\/head> <body> <div class=\"window\"> <div class=\"header\">Different Window<\/div> <div class=\"content\"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates dolore nesciunt ratione earum blanditiis a.<\/p> <p>You can customize this design further based on your preferences.<\/p> <\/div> <div class=\"footer\"> <button class=\"button button-primary\">Primary Button<\/button> <button class=\"button button-secondary\">Secondary Button<\/button> <\/div> <\/div> <\/body> <\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Background color for the body: #2c3e50 Background color for the window: #34495e Header and footer background color: #3498db Border color for the window: #2c3e50 Text color for the content: #ecf0f1","starterCode":"<!DOCTYPE html><html><head><style><\/style><\/head><body><\/body><\/html>","category":"Grid_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"grid5","title":"Grid Task 5","order":"400","problemStatement":"<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Responsive Frame<\/title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .container { display: flex; max-width: 600px; margin: 20px auto; background-color: #f0f0f0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); height: 300px; } .left-side { flex: 1; padding: 20px; } .right-side { flex: 1; overflow: hidden; position: relative; } .right-side img { width: 100%; height: 100%; object-fit: cover; } h2 { margin-top: 0; } p { margin-bottom: 20px; } button { padding: 10px; background-color: #4CAF50; color: #fff; border: none; cursor: pointer; border-radius: 5px; } <\/style><\/head><body> <div class=\"container\"> <div class=\"left-side\"> <h2>Title<\/h2> <p>Content and description go here.<\/p> <button>Click me<\/button> <\/div> <div class=\"right-side\"> <img src=\" https:\/\/mernapi.evorieainfotechpvtltd.com\/documents\/tree.jpg\" alt=\"Image\"> <\/div> <\/div><\/body><\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Things used: Background color of the container: #f0f0f0 Button background color: #4CAF50 Button text color: #fff image used:https:\/\/mernapi.evorieainfotechpvtltd.com\/documents\/tree.jpg","starterCode":"<!DOCTYPE html><html><head><style><\/style><\/head><body><img src=\"https:\/\/mernapi.evorieainfotechpvtltd.com\/documents\/tree.jpg\" alt=\"Image\"><\/body><\/html>","category":"Grid_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":null},{"id":"Hello_World","title":"Hello World","order":"400","problemStatement":"We all know that the input and output functionality forms the basics of any programming language. As a universal practice, let us begin with this - Write a program to print \"Hello World!\".","testCases":"[{\"id\":\"1\",\"inputText\":\"Hello World!\",\"outputText\":\"Hello World!\"},{\"id\":\"2\",\"inputText\":\"Hello World!\",\"outputText\":\"Hello World!\"}]","constraints":"No constraints","starterCode":"\/\/write your program here","category":"Input_Output","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":null},{"id":"html1","title":"HTML task 1","order":"400","problemStatement":"<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Form with Dark Green Background<\/title>\r\n <style>\r\n body {\r\n background-color: #013220; \/* Dark green background *\/\r\n font-family: Arial, sans-serif;\r\n padding: 20px;\r\n margin: 0;\r\n }\r\n\r\n form {\r\n background-color: #ff0000; \/* Red background for the form *\/\r\n padding: 20px;\r\n border-radius: 10px;\r\n max-width: 400px;\r\n margin: 50px auto;\r\n color: white; \/* White text inside the form *\/\r\n box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n label {\r\n font-weight: bold;\r\n display: block;\r\n margin-bottom: 8px;\r\n }\r\n\r\n input[type=\"text\"],\r\n input[type=\"email\"],\r\n textarea {\r\n width: 100%;\r\n padding: 10px;\r\n margin-bottom: 15px;\r\n border: 1px solid white; \/* White borders *\/\r\n border-radius: 5px;\r\n background-color: #ffffff; \/* White input background *\/\r\n color: black; \/* Black text inside inputs *\/\r\n box-sizing: border-box;\r\n }\r\n\r\n input[type=\"submit\"] {\r\n background-color: white; \/* White button *\/\r\n color: red; \/* Red text for button *\/\r\n padding: 10px 20px;\r\n border: 2px solid white;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n transition: background-color 0.3s ease, color 0.3s ease;\r\n }\r\n\r\n input[type=\"submit\"]:hover {\r\n background-color: #013220; \/* Dark green on hover *\/\r\n color: white; \/* White text on hover *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <form>\r\n <label for=\"name\">Name:<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" required>\r\n\r\n <label for=\"email\">Email:<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" required>\r\n\r\n <label for=\"message\">Message:<\/label>\r\n <textarea id=\"message\" name=\"message\" rows=\"4\" required><\/textarea>\r\n\r\n <input type=\"submit\" value=\"Submit\">\r\n <\/form>\r\n<\/body>\r\n<\/html>\r\n","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Background of the Body: Color: #013220 Description: Dark green. Form Background: Color: #ff0000 Description: Bright red. Text Inside the Form: Color: white Description: White text. Borders of Input Fields and Textarea: Color: white Description: White borders. Background of Input Fields and Textarea: Color: #ffffff Description: White. Text Inside Input Fields and Textarea: Color: black Description: Black text. Submit Button Background: Color: white Description: White background. Submit Button Text: Color: red Description: Red text","starterCode":"\/\/write your program here","category":"HTML","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":null},{"id":"html2","title":"HTML Task 2","order":"400","problemStatement":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Styled Table with Style Tag<\/title>\n <style>\n table {\n width: 100%;\n border-collapse: collapse;\n margin: 20px auto;\n text-align: left;\n font-family: Arial, sans-serif;\n }\n th, td {\n padding: 10px;\n border: 1px solid #ddd;\n }\n thead tr {\n background-color: #4CAF50;\n color: white;\n }\n tbody tr:nth-child(even) {\n background-color: #f2f2f2;\n }\n tbody tr:nth-child(odd) {\n background-color: #ffffff;\n }\n <\/style>\n<\/head>\n<body>\n <table>\n <thead>\n <tr>\n <th>Name<\/th>\n <th>Age<\/th>\n <th>City<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>John<\/td>\n <td>25<\/td>\n <td>New York<\/td>\n <\/tr>\n <tr>\n <td>Jane<\/td>\n <td>30<\/td>\n <td>Los Angeles<\/td>\n <\/tr>\n <tr>\n <td>Mike<\/td>\n <td>28<\/td>\n <td>Chicago<\/td>\n <\/tr>\n <tr>\n <td>Anna<\/td>\n <td>22<\/td>\n <td>Miami<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n<\/body>\n<\/html>\n","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Header Row Background (Table Header): Color: #4CAF50 Description: Green. Header Row Text Color (Table Header): Color: white Description: White text. Even Rows Background (Table Body): Color: #f2f2f2 Description: Light gray. Odd Rows Background (Table Body): Color: #ffffff Description: White. Cell Borders (Table Cells): Color: #ddd Description: Light gray border.","starterCode":"\/\/write your program here","category":"HTML","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":null},{"id":"html4","title":"HTML Task 3","order":"400","problemStatement":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Styled List<\/title>\n <style>\n body {\n background-color: red; \/* Blue background *\/\n margin: 0;\n padding: 0;\n font-family: Arial, sans-serif;\n }\n ul {\n list-style-type: none; \/* Remove default bullets *\/\n padding: 0;\n max-width: 400px;\n margin: 50px auto; \/* Center the list with a top margin *\/\n font-family: Arial, sans-serif;\n border: 2px solid #4CAF50; \/* Green border for the list *\/\n border-radius: 8px;\n background-color: white; \/* White background for the list *\/\n }\n li {\n padding: 15px;\n border-bottom: 1px solid #ddd; \/* Border between items *\/\n }\n li:nth-child(even) {\n background-color: #f2f2f2; \/* Light grey for even items *\/\n }\n li:nth-child(odd) {\n background-color: #ffffff; \/* White for odd items *\/\n }\n li:last-child {\n border-bottom: none; \/* Remove border for the last item *\/\n }\n h2 {\n background-color: #4CAF50; \/* Green background for the header *\/\n color: white;\n padding: 10px;\n text-align: center;\n margin: 0;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n }\n <\/style>\n<\/head>\n<body>\n <ul>\n <h2>Shopping List<\/h2>\n <li>Apples<\/li>\n <li>Bananas<\/li>\n <li>Carrots<\/li>\n <li>Tomatoes<\/li>\n <li>Potatoes<\/li>\n <li>Milk<\/li>\n <\/ul>\n<\/body>\n<\/html>\n","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Body Background: Color: red Description: Bright red background for the entire page. List Border (ul): Color: #4CAF50 Description: Green border for the list. List Background (ul): Color: white Description: White background for the entire list container. Even List Items Background (li:nth-child(even)): Color: #f2f2f2 Description: Light gray background for even-numbered items. Odd List Items Background (li:nth-child(odd)): Color: #ffffff Description: White background for odd-numbered items. List Item Borders (li): Color: #ddd Description: Light gray borders between list items. Header Background (h2): Color: #4CAF50 Description: Green background for the header. Header Text (h2): Color: white Description: White text for the header.","starterCode":"\/\/write your program here","category":"HTML","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":null},{"id":"html5","title":"HTML Task 4","order":"400","problemStatement":"<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n <style>\n .box{\n width: 500px;\n height: 250px;\n background: repeating-radial-gradient(blue 10px,blue 20px,green 10px,green 30px);\n}\n <\/style>\n<\/head>\n\n<body>\n <div class=\"box\">\n \n <\/div>\n\n<br>\n<br>\n<br>\n<br>\n<br>\n<\/body>\n\n<\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"width-->500px height -->250px color used blue and green","starterCode":"\/\/write your program here","category":"HTML","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"qqq","title":"qwwqwq","order":"400","problemStatement":"wqwqrwqwqeeqw","testCases":"[{\"name\":\"rqwrqw\",\"test\":\"rqwqrw\"},{\"name\":\"rwqrwq\",\"test\":\"rqwrwqrwq\"}]","constraints":"No constraints","starterCode":"\/\/write your program here","category":"test","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react1","title":"React Task 1","order":"300","problemStatement":"const Component = () => { const [count, setCount] = React.useState(0); const incrementCount = () => { setCount(count + 1); }; const decrementCount = () => { if (count > 0) { setCount(count - 1); } }; const buttonStyle = { border: '2px solid #007bff', borderRadius: '5px', background: 'none', color: '#007bff', padding: '5px 10px', cursor: 'pointer', fontSize: '16px', transition: 'background 0.3s, color 0.3s', }; return ( <div style={{ textAlign: 'center', marginTop: '20px' }}> <h2>Click Counter<\/h2> <div style={{ marginBottom: '10px' }}> <button onClick={decrementCount} style={buttonStyle}> - <\/button> <span style={{ fontSize: '20px', fontWeight: 'bold', margin: '0 10px' }}>{count}<\/span> <button onClick={incrementCount} style={buttonStyle}> + <\/button> <\/div> <\/div> ); };","testCases":"[\r\n {\r\n \"name\": \"1\",\r\n \"test\": \"() => { return document.getElementById('count')?.textContent === '0'; }\"\r\n },\r\n {\r\n \"name\": \"2\",\r\n \"test\": \"() => { const incrementButton = document.getElementById('increment'); if (incrementButton) { incrementButton.click(); return document.getElementById('count')?.textContent === '1'; } return false; }\"\r\n },\r\n {\r\n \"name\": \"3\",\r\n \"test\": \"() => { const decrementButton = document.getElementById('decrement'); if (decrementButton) { decrementButton.click(); return document.getElementById('count')?.textContent === '0'; } return false; }\"\r\n }\r\n]\r\n","constraints":"Refer the expected output for sample Important: give the + button id as 'increment' - button id as 'decrement' and id for number display as 'count'","starterCode":"const Component=()=>{\r\n return(\r\n <div>\r\n Hello\r\n <\/div>\r\n )\r\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react10","title":"React Task 10","order":"400","problemStatement":"\r\nconst Component = () => {\r\n const [tasks, setTasks] = React.useState([]);\r\n const [taskName, setTaskName] = React.useState(\"\");\r\n const [taskPriority, setTaskPriority] = React.useState(\"Low\");\r\n\r\n const handleAddTask = () => {\r\n if (!taskName) return; \/\/ Don't add empty task\r\n\r\n const newTask = {\r\n id: tasks.length + 1,\r\n name: taskName,\r\n priority: taskPriority,\r\n };\r\n\r\n setTasks([...tasks, newTask]);\r\n setTaskName(\"\");\r\n };\r\n\r\n const containerStyle = { textAlign: \"center\" };\r\n const inputContainerStyle = { margin: \"20px 0\" };\r\n const inputStyle = { padding: \"10px\", marginRight: \"10px\" };\r\n const selectStyle = { padding: \"10px\" };\r\n const buttonStyle = {\r\n padding: \"10px 20px\",\r\n background: \"#007bff\",\r\n color: \"#fff\",\r\n border: \"none\",\r\n borderRadius: \"5px\",\r\n cursor: \"pointer\",\r\n };\r\n const taskListStyle = {\r\n display: \"flex\",\r\n justifyContent: \"space-around\",\r\n marginTop: \"20px\",\r\n };\r\n const listStyle = {\r\n flex: \"1\",\r\n margin: \"0 10px\",\r\n padding: \"20px\",\r\n border: \"1px solid #ccc\",\r\n borderRadius: \"5px\",\r\n boxShadow: \"0 2px 4px rgba(0, 0, 0, 0.1)\",\r\n };\r\n const headingStyle = { marginTop: \"0\" };\r\n\r\n return (\r\n <div style={containerStyle}>\r\n <h1>Task Manager<\/h1>\r\n\r\n <div style={inputContainerStyle}>\r\n <input\r\n type=\"text\"\r\n value={taskName}\r\n onChange={(e) => setTaskName(e.target.value)}\r\n placeholder=\"Enter task name\"\r\n style={inputStyle}\r\n \/>\r\n\r\n <select\r\n value={taskPriority}\r\n onChange={(e) => setTaskPriority(e.target.value)}\r\n style={selectStyle}\r\n >\r\n <option value=\"Low\">Low<\/option>\r\n <option value=\"Medium\">Medium<\/option>\r\n <option value=\"High\">High<\/option>\r\n <\/select>\r\n\r\n <button onClick={handleAddTask} style={buttonStyle}>\r\n Add Task\r\n <\/button>\r\n <\/div>\r\n\r\n <div style={taskListStyle}>\r\n {[\"Low\", \"Medium\", \"High\"].map((priority) => (\r\n <div key={priority} style={listStyle}>\r\n <h2 style={headingStyle}>{priority} Priority Tasks<\/h2>\r\n {tasks\r\n .filter((task) => task.priority === priority)\r\n .map((task) => (\r\n <div key={task.id}>{task.name}<\/div>\r\n ))}\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n );\r\n};\r\n\r\n","testCases":"[{\"name\":\"1\",\"test\":\"() => { const inputElement = document.getElementById('task-input'); const addButton = document.getElementById('add-task-btn'); inputElement.value = 'New Task'; addButton.click(); return document.querySelectorAll('.task-item').length === 0; }\"},{\"name\":\"2\",\"test\":\"() => { const selectElement = document.getElementById('priority-select'); selectElement.value = 'High'; selectElement.dispatchEvent(new Event('change', { bubbles: true })); return document.getElementById('high-priority-list').querySelectorAll('.task-item').length === 0; }\"},{\"name\":\"3\",\"test\":\"() => { const lowPriorityList = document.getElementById('low-priority-list').querySelectorAll('.task-item'); const mediumPriorityList = document.getElementById('medium-priority-list').querySelectorAll('.task-item'); const highPriorityList = document.getElementById('high-priority-list').querySelectorAll('.task-item'); return lowPriorityList.length === 0 && mediumPriorityList.length === 0 && highPriorityList.length === 0; }\"}]","constraints":"App Container ID:id: appUsage: Represents the main container of the application.Heading ID:id: headingUsage: Represents the heading of the application.Input Container ID:id: input-containerUsage: Represents the container for input elements (task name input field, priority select dropdown, and add task button).Task Input ID:id: task-inputUsage: Represents the input field where users enter the task name.Priority Select ID:id: priority-selectUsage: Represents the select dropdown for selecting the task priority.Add Task Button ID:id: add-task-btnUsage: Represents the button used to add a new task.Task Lists Container ID:id: task-listsUsage: Represents the container for task lists (low priority, medium priority, and high priority).Low Priority Task List ID:id: low-priority-listUsage: Represents the list of tasks with low priority.Medium Priority Task List ID:id: medium-priority-listUsage: Represents the list of tasks with medium priority.High Priority Task List ID:id: high-priority-listUsage: Represents the list of tasks with high priority.Task Item Class:class: task-itemUsage: Represents individual task items within the task lists.","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react2","title":"React Task 2","order":"300","problemStatement":"const Component = () => {\r\n const [usdAmount, setUsdAmount] = React.useState('0');\r\n const [inrAmount, setInrAmount] = React.useState('');\r\n\r\n const convertToINR = () => {\r\n const usdToInrRate = 83.62;\r\n const convertedAmount = parseFloat(usdAmount) * usdToInrRate;\r\n setInrAmount(convertedAmount.toFixed(2));\r\n };\r\n\r\n return (\r\n <div style={{ fontFamily: 'Arial', padding: '20px', textAlign: 'center' }}>\r\n <h2>USD to INR Converter<\/h2>\r\n\r\n <input\r\n type=\"number\"\r\n placeholder=\"Enter amount in USD\"\r\n value={usdAmount}\r\n onChange={(e) => setUsdAmount(e.target.value)}\r\n style={{\r\n padding: '10px',\r\n margin: '10px',\r\n fontSize: '16px',\r\n width: '200px',\r\n }}\r\n \/>\r\n\r\n <button\r\n onClick={convertToINR}\r\n style={{\r\n padding: '10px 20px',\r\n fontSize: '16px',\r\n backgroundColor: '#007bff',\r\n color: '#fff',\r\n border: 'none',\r\n borderRadius: '5px',\r\n cursor: 'pointer',\r\n }}\r\n >\r\n Convert\r\n <\/button>\r\n\r\n {inrAmount && (\r\n <p style={{ fontSize: '20px', marginTop: '20px' }}>\r\n {usdAmount} USD = {inrAmount} INR\r\n <\/p>\r\n )}\r\n <\/div>\r\n );\r\n};","testCases":"[{\"name\":\"1\",\"test\":\"() => { const usdInput = document.getElementById('usdAmount'); if (usdInput) { usdInput.value = '50'; return true; } return false; }\"},{\"name\":\"2\",\"test\":\"() => { const convertButton = document.getElementById('convertButton'); if (convertButton) { convertButton.click(); return document.getElementById('convertedAmount')?.textContent === '0 USD = 0.00 INR'; } return false; }\"},{\"name\":\"3\",\"test\":\"() => { const usdInput = document.getElementById('usdAmount'); if (usdInput) { usdInput.value = '50'; return true; } return false; }\"}]","constraints":"The input field has the ID usdAmount. The button to trigger the conversion has the ID convertButton. The paragraph where the converted amount is displayed has the ID convertedAmount. The parent div wrapping the entire component has the ID currencyConverter. Currency conversion rate is \"83.62\"","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react3","title":"React Task 3","order":"300","problemStatement":"const Component = () => { const [input, setInput] = React.useState(''); const buttonStyle = { padding: '10px 20px', fontSize: '16px', backgroundColor: '#007bff', color: '#fff', border: 'none', borderRadius: '5px', cursor: 'pointer', margin: '5px' }; const inputStyle = { padding: '10px', margin: '10px', fontSize: '16px', width: '200px', border: '1px solid black' }; return ( <div> <h1 style={{ fontFamily: 'Arial' }}>Calculator<\/h1> <input type='text' value={input} onChange={(e) => setInput(e.target.value)} style={inputStyle} \/> <br \/> <button style={buttonStyle} onClick={() => setInput(input + '1')}>1<\/button> <button style={buttonStyle} onClick={() => setInput(input + '2')}>2<\/button> <button style={buttonStyle} onClick={() => setInput(input + '3')}>3<\/button> <button style={buttonStyle} onClick={() => setInput(input + '4')}>4<\/button> <button style={buttonStyle} onClick={() => setInput(input + '5')}>5<\/button> <br \/> <button style={buttonStyle} onClick={() => setInput(input + '6')}>6<\/button> <button style={buttonStyle} onClick={() => setInput(input + '7')}>7<\/button> <button style={buttonStyle} onClick={() => setInput(input + '8')}>8<\/button> <button style={buttonStyle} onClick={() => setInput(input + '9')}>9<\/button> <button style={buttonStyle} onClick={() => setInput(input + '0')}>0<\/button> <br \/> <button style={buttonStyle} onClick={() => setInput(input + '+')}>+<\/button> <button style={buttonStyle} onClick={() => setInput(input + '-')}>-<\/button> <button style={buttonStyle} onClick={() => setInput(input + '*')}>*<\/button> <button style={buttonStyle} onClick={() => setInput(input + '\/')}>\/<\/button> <button style={buttonStyle} onClick={() => setInput(eval(input))}>=<\/button> <button style={buttonStyle} onClick={() => setInput('')}>C<\/button> <\/div> ); };","testCases":"[{\"name\":\"1\",\"test\":\"() => { const usdInput = document.getElementById('input1'); if (usdInput) { usdInput.value = ''; const btn1 = document.getElementById('btn-1'); if (btn1) { btn1.click(); return usdInput.value === '1'; } } return false; }\"},{\"name\":\"2\",\"test\":\"() => { const usdInput = document.getElementById('input1'); if (usdInput) { usdInput.value = ''; const btn1 = document.getElementById('btn-1'); const btnPlus = document.getElementById('btn-plus'); const btn2 = document.getElementById('btn-2'); const btnEquals = document.getElementById('btn-equals'); if (btn1 && btn2 && btnPlus && btnEquals) { btn1.click(); btnPlus.click(); btn2.click(); btnEquals.click(); return usdInput.value === '13'; } } return false; }\"},{\"name\":\"3\",\"test\":\"() => { const usdInput = document.getElementById('input1'); if (usdInput) { usdInput.value = ''; const btnClear = document.getElementById('btn-clear'); if (btnClear) { btnClear.click(); return usdInput.value === ''; } } return false; }\"},{\"name\":\"4\",\"test\":\"() => { const usdInput = document.getElementById('input1'); if (usdInput) { usdInput.value = ''; const btn5 = document.getElementById('btn-5'); const btnDiv = document.getElementById('btn-divide'); const btn2 = document.getElementById('btn-2'); const btnEquals = document.getElementById('btn-equals'); if (btn5 && btnDiv && btn2) { btn5.click(); btnDiv.click(); btn2.click(); btnEquals.click(); return usdInput.value === '2.5'; } } return false; }\"}]","constraints":"IDs: input1:Input field id btn-1: Button for number 1 btn-2: Button for number 2 btn-3: Button for number 3 btn-4: Button for number 4 btn-5: Button for number 5 btn-6: Button for number 6 btn-7: Button for number 7 btn-8: Button for number 8 btn-9: Button for number 9 btn-0: Button for number 0 btn-plus: Button for addition (+) btn-minus: Button for subtraction (-) btn-multiply: Button for multiplication (*) btn-divide: Button for division (\/) btn-equals: Button for equals (=) btn-clear: Button for clearing the input (C)","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"medium","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react4","title":"React Task 4","order":"600","problemStatement":"const Component = () => { const [inputValue, setInputValue] = React.useState(''); const [textareaValue, setTextareaValue] = React.useState(''); const [selectValue, setSelectValue] = React.useState(''); const [output, setOutput] = React.useState(''); const handleSubmit = (e) => { e.preventDefault(); const outputText = `Input: ${inputValue}\\nTextarea: ${textareaValue}\\nSelect: ${selectValue}`; setOutput(outputText); }; return ( <div style={{ textAlign: 'center' }}> <form onSubmit={handleSubmit} style={{ margin: '20px auto', maxWidth: '400px', backgroundColor: '#e0f2f1', padding: '30px', borderRadius: '10px' }}> <div style={{ marginBottom: '20px' }}> <label htmlFor=\"inputField\" style={{ display: 'block', marginBottom: '5px' }}>Input:<\/label> <input type=\"text\" value={inputValue} onChange={(e) => setInputValue(e.target.value)} style={{ width: '100%', padding: '10px', border: '1px solid #90a4ae', borderRadius: '5px' }} \/> <\/div> <div style={{ marginBottom: '20px' }}> <label htmlFor=\"textareaField\" style={{ display: 'block', marginBottom: '5px' }}>Textarea:<\/label> <textarea value={textareaValue} onChange={(e) => setTextareaValue(e.target.value)} style={{ width: '100%', padding: '10px', border: '1px solid #90a4ae', borderRadius: '5px', minHeight: '100px' }} \/> <\/div> <div style={{ marginBottom: '20px' }}> <label htmlFor=\"selectField\" style={{ display: 'block', marginBottom: '5px' }}>Select:<\/label> <select value={selectValue} onChange={(e) => setSelectValue(e.target.value)} style={{ width: '100%', padding: '10px', border: '1px solid #90a4ae', borderRadius: '5px' }} > <option value=\"\">Select an option<\/option> <option value=\"option1\">Option 1<\/option> <option value=\"option2\">Option 2<\/option> <option value=\"option3\">Option 3<\/option> <\/select> <\/div> <button type=\"submit\" style={{ padding: '12px 24px', backgroundColor: '#4caf50', color: '#fff', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>Submit<\/button> <\/form> {output && ( <div style={{ marginTop: '20px', border: '1px solid #ccc', padding: '10px', borderRadius: '5px' }}> <pre>{output}<\/pre> <\/div> )} <\/div> ); };","testCases":"[{\"name\":\"1\",\"test\":\"() => { const inputField = document.getElementById('inputField'); const textareaField = document.getElementById('textareaField'); const selectField = document.getElementById('selectField'); return inputField.value === '' && textareaField?.value === '' && selectField?.value === ''; }\"},{\"name\":\"2\",\"test\":\"() => { const inputField = document.getElementById('inputField'); const textareaField = document.getElementById('textareaField'); const selectField = document.getElementById('selectField'); inputField.value = 'Test Input'; textareaField.value = 'Test Textarea'; selectField.value = 'option2'; const form = document.getElementById('formWithOutput'); form.dispatchEvent(new Event('submit')); return true; }\"},{\"name\":\"3\",\"test\":\"() => { const inputField = document.getElementById('inputField'); const textareaField = document.getElementById('textareaField'); const selectField = document.getElementById('selectField'); inputField.value = ''; textareaField.value = ''; selectField.value = ''; const form = document.getElementById('formWithOutput'); form.dispatchEvent(new Event('submit')); const submitButton = document.getElementById('submitButton'); if (submitButton) { submitButton.click(); return true } return false; }\"},{\"name\":\"4\",\"test\":\"() => { const output = document.getElementById('output'); return output.textContent === 'Input: \\\\nTextarea: \\\\nSelect: '; }\"}]","constraints":"formWithOutput: ID assigned to the outermost <div> wrapping the entire form component. inputField: ID assigned to the input field where users can enter text. textareaField: ID assigned to the textarea field where users can enter multi-line text. selectField: ID assigned to the select dropdown where users can choose options. submitButton: ID assigned to the submit button used to submit the form. output: ID assigned to the <div> that displays the output after form submission.","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react5","title":"React Task 5","order":"250","problemStatement":"const Component = () => { const [seconds, setSeconds] = React.useState(0); const [isActive, setIsActive] = React.useState(false); const intervalRef = React.useRef(null); const startTimer = () => { setIsActive(true); intervalRef.current = setInterval(() => { setSeconds((prevSeconds) => prevSeconds + 1); }, 1000); }; const stopTimer = () => { setIsActive(false); clearInterval(intervalRef.current); }; const resetTimer = () => { clearInterval(intervalRef.current); setSeconds(0); setIsActive(false); }; return ( <div style={{ textAlign: 'center' }}> <h1 style={{ fontSize: '2rem', marginBottom: '20px' }}>Timer: {seconds}s<\/h1> <button style={{ backgroundColor: isActive ? '#FF6347' : '#32CD32', color: 'white', padding: '10px 20px', fontSize: '1rem', border: 'none', borderRadius: '5px', marginRight: '10px', }} onClick={isActive ? stopTimer : startTimer} > {isActive ? 'Stop' : 'Start'} <\/button> <button style={{ backgroundColor: '#6495ED', color: 'white', padding: '10px 20px', fontSize: '1rem', border: 'none', borderRadius: '5px', }} onClick={resetTimer} > Reset <\/button> <\/div> ); };","testCases":"[{\"name\":\"1\",\"test\":\"() => { const timerDisplay = document.getElementById('timer-display'); return timerDisplay.textContent === 'Timer: 0s';}\"},{\"name\":\"2\",\"test\":\"() => { const startButton = document.getElementById('start-button'); startButton.click(); const timerDisplay = document.getElementById('timer-display'); return timerDisplay.textContent === 'Timer: 0s'; }\"},{\"name\":\"3\",\"test\":\"()=>{ setTimeout(() => { const stopButton = document.getElementById('start-button'); stopButton.click();},3000); return true }\"},{\"name\":\"4\",\"test\":\"() => { const timerDisplay = document.getElementById('timer-display'); return timerDisplay.textContent === 'Timer: 1s';}\"}]","constraints":"Timer display: timer-display Start\/Stop button: start-button (Note: Create a single button which needs to contain both stop and start) Reset button: reset-button\"","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"medium","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react6","title":"React Task 6","order":"250","problemStatement":"const Component = () => {\n const [duration, setDuration] = React.useState(2);\n const [timer, setTimer] = React.useState(null);\n const [timeLeft, setTimeLeft] = React.useState(duration);\n React.useEffect(() => {\n if (timer === null) return;\n const interval = setInterval(() => {\n setTimeLeft((prevTimeLeft) => {\n const newTimeLeft = prevTimeLeft - 1;\n if (newTimeLeft === 0) {\n clearInterval(interval);\n return \"Happy Birthday!\";\n }\n return newTimeLeft;\n });\n }, 1000);\n return () => clearInterval(interval);\n }, [timer, duration]);\n const startTimer = () => {\n setTimeLeft(duration);\n setTimer(\n setTimeout(() => {\n clearInterval(timer);\n setTimer(null);\n }, duration * 1000)\n );\n };\n const handleChange = (event) => {\n const { value } = event.target;\n setDuration(parseInt(value));\n };\n return (\n <div style={{ textAlign: \"center\", marginTop: \"20px\" }}>\n {\" \"}\n <label style={{ marginRight: \"10px\" }}>\n {\" \"}\n Enter Duration (in seconds):{\" \"}\n <input\n type=\"number\"\n value={duration}\n onChange={handleChange}\n style={{\n marginLeft: \"5px\",\n padding: \"5px\",\n border: \"1px solid black\",\n }}\n \/>{\" \"}\n <\/label>{\" \"}\n <button\n onClick={startTimer}\n style={{\n marginLeft: \"10px\",\n padding: \"5px 10px\",\n backgroundColor: \"#007bff\",\n color: \"#fff\",\n border: \"none\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n }}\n >\n {\" \"}\n Start Timer{\" \"}\n <\/button>{\" \"}\n <div style={{ marginTop: \"20px\" }}>\n {\" \"}\n {timer !== null && (\n <p style={{ fontSize: \"20px\" }}>Time Left: {timeLeft} seconds<\/p>\n )}{\" \"}\n {timer === null && timeLeft === \"Happy Birthday!\" && (\n <p style={{ fontSize: \"20px\" }}>{timeLeft}<\/p>\n )}{\" \"}\n <\/div>{\" \"}\n <\/div>\n );\n};\n","testCases":"[{\"name\":\"1\",\"test\":\"() => { const durationInput = document.getElementById('durationInput'); const startButton = document.getElementById('startButton'); return durationInput && startButton; }\"},{\"name\":\"2\",\"test\":\"() => { const durationInput = document.getElementById('durationInput'); const startButton = document.getElementById('startButton'); if (durationInput && startButton) { durationInput.value = '2'; durationInput.dispatchEvent(new Event('change')); startButton.click(); const timeLeft = document.getElementById('timeLeft'); return timeLeft && timeLeft.textContent === 'Time Left: 2 seconds'; } return false; }\"},{\"name\":\"3\",\"test\":\"() => { const durationInput = document.getElementById('durationInput'); const startButton = document.getElementById('startButton'); if (durationInput && startButton) { return new Promise((resolve) => { setTimeout(() => { const birthdayMessage = document.getElementById('birthdayMessage'); resolve(birthdayMessage && birthdayMessage.textContent === 'Happy Birthday!'); }, 4000); }); } return false; }\"}]","constraints":"durationInput (ID for Input Field) startButton (ID for Start Timer Button) timeLeft (ID for Time Left Display) birthdayMessage (ID for \"Happy Birthday!\" Message Display) Give the initial value of duration as 2","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"medium","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react7","title":"React Task 7","order":"400","problemStatement":"const conversionRates = { inr: { usd: 0.014, eur: 0.012, gbp: 0.010, }, usd: { inr: 71.27, eur: 0.86, gbp: 0.74, }, eur: { inr: 81.64, usd: 1.16, gbp: 0.86, }, gbp: { inr: 97.51, usd: 1.35, eur: 1.17, },};const Component=()=> { const [amount1, setAmount1] = React.useState(''); const [amount2, setAmount2] = React.useState(''); const [currency1, setCurrency1] = React.useState('inr'); const [currency2, setCurrency2] = React.useState('usd'); const handleAmount1Change = (event) => { const value = event.target.value; setAmount1(value); convert(value, currency1, currency2); }; const handleAmount2Change = (event) => { const value = event.target.value; setAmount2(value); convert(value, currency2, currency1); }; const handleCurrency1Change = (event) => { const value = event.target.value; setCurrency1(value); convert(amount1, value, currency2); }; const handleCurrency2Change = (event) => { const value = event.target.value; setCurrency2(value); convert(amount2, currency1, value); }; const convert = (value, fromCurrency, toCurrency) => { const rate = conversionRates[fromCurrency][toCurrency]; const convertedAmount = parseFloat(value) * rate; if (!isNaN(convertedAmount)) { if (toCurrency === currency2) { setAmount2(convertedAmount.toFixed(2)); } else { setAmount1(convertedAmount.toFixed(2)); } } }; return ( <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}> <div style={{ marginBottom: '20px', display: 'flex' }}> <input type=\"number\" value={amount1} onChange={handleAmount1Change} placeholder=\"Enter amount\" style={{ padding: '10px', fontSize: '16px', border: '1px solid #ccc', borderRadius: '5px', marginRight: '10px', width: '200px' }} \/> <select value={currency1} onChange={handleCurrency1Change} style={{ padding: '10px', fontSize: '16px', border: '1px solid #ccc', borderRadius: '5px' }} > <option value=\"inr\">INR<\/option> <option value=\"usd\">USD<\/option> <option value=\"eur\">EUR<\/option> <option value=\"gbp\">GBP<\/option> <\/select> <\/div> <div style={{ marginBottom: '20px', display: 'flex' }}> <input type=\"number\" value={amount2} onChange={handleAmount2Change} placeholder=\"Converted amount\" style={{ padding: '10px', fontSize: '16px', border: '1px solid #ccc', borderRadius: '5px', marginRight: '10px', width: '200px' }} \/> <select value={currency2} onChange={handleCurrency2Change} style={{ padding: '10px', fontSize: '16px', border: '1px solid #ccc', borderRadius: '5px' }} > <option value=\"inr\">INR<\/option> <option value=\"usd\">USD<\/option> <option value=\"eur\">EUR<\/option> <option value=\"gbp\">GBP<\/option> <\/select> <\/div> <\/div> );};","testCases":"[{\"name\":\"1\",\"test\":\"() => { return ( document.getElementById('amount1')?.value === '' && document.getElementById('amount2')?.value === '' ); }\"},{\"name\":\"2\",\"test\":\"() => { const amount1Input = document.getElementById('amount1'); const currency1Select = document.getElementById('currency1'); const currency2Select = document.getElementById('currency2'); if (amount1Input && currency1Select && currency2Select) { amount1Input.value = '100'; amount1Input.dispatchEvent(new Event('change', { bubbles: true })); currency1Select.value = 'inr'; currency1Select.dispatchEvent(new Event('change', { bubbles: true })); currency2Select.value = 'usd'; currency2Select.dispatchEvent(new Event('change', { bubbles: true })); return document.getElementById('amount2')?.value === ''; } return false; }\"},{\"name\":\"3\",\"test\":\"() => { const amount2Input = document.getElementById('amount2'); const currency1Select = document.getElementById('currency1'); const currency2Select = document.getElementById('currency2'); if (amount2Input && currency1Select && currency2Select) { amount2Input.value = '10'; amount2Input.dispatchEvent(new Event('change', { bubbles: true })); currency1Select.value = 'usd'; currency1Select.dispatchEvent(new Event('change', { bubbles: true })); currency2Select.value = 'inr'; currency2Select.dispatchEvent(new Event('change', { bubbles: true })); return document.getElementById('amount1')?.value === ''; } return false; }\"}]","constraints":"Input 1 (Amount 1):ID: amount1Select Dropdown 1 (Currency 1):ID: currency1Input 2 (Amount 2):ID: amount2Select Dropdown 2 (Currency 2):ID: currency2Currencies used:const conversionRates = { inr: { usd: 0.014, eur: 0.012, gbp: 0.01, }, usd: { inr: 71.27, eur: 0.86, gbp: 0.74, }, eur: { inr: 81.64, usd: 1.16, gbp: 0.86, }, gbp: { inr: 97.51, usd: 1.35, eur: 1.17, },};","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react8","title":"React Task 8","order":"400","problemStatement":"const Component=()=> { const [countries] = React.useState([ { id: 1, name: 'USA', capital: 'Washington, D.C.' }, { id: 2, name: 'United Kingdom', capital: 'London' }, { id: 3, name: 'France', capital: 'Paris' }, { id: 4, name: 'Germany', capital: 'Berlin' }, { id: 5, name: 'Japan', capital: 'Tokyo' }, ]); const [selectedCountry, setSelectedCountry] = React.useState(null); const handleCountryClick = (countryId) => { const country = countries.find((c) => c.id === countryId); setSelectedCountry(country); }; return ( <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px', maxWidth: '400px', margin: 'auto' }}> <h1 style={{ textAlign: 'center', marginBottom: '20px' }}>Countries and Capitals<\/h1> <ul style={{ listStyleType: 'none', padding: 0 }}> {countries.map((country) => ( <li key={country.id} style={{ padding: '10px', backgroundColor: '#f2f2f2', borderRadius: '5px', cursor: 'pointer', marginBottom: '5px', }} onClick={() => handleCountryClick(country.id)} > {country.name} <\/li> ))} <\/ul> {selectedCountry && ( <div style={{ marginTop: '20px', padding: '10px', border: '1px solid #ccc', borderRadius: '5px' }}> <h2 >{selectedCountry.name}<\/h2> <p >Capital: {selectedCountry.capital}<\/p> <\/div> )} <\/div> ); }; ","testCases":"[{\"name\":\"1\",\"test\":\"() => { return document.getElementById('heading') !== null; }\"},{\"name\":\"2\",\"test\":\"() => { return document.getElementById('country-list') !== null; }\"},{\"name\":\"3\",\"test\":\"() => { const franceCountry = document.getElementById('country-3'); if (franceCountry) { franceCountry.click(); const selectedCountryName = document.getElementById('selected-country-name'); const selectedCountryCapital = document.getElementById('selected-country-capital'); return selectedCountryName && selectedCountryName.textContent === 'France' && selectedCountryCapital && selectedCountryCapital.textContent === 'Capital: Paris'; } return false; }\"},{\"name\":\"4\",\"test\":\"() => { const japanCountry = document.getElementById('country-5'); if (japanCountry) { japanCountry.click(); const selectedCountryName = document.getElementById('selected-country-name'); const selectedCountryCapital = document.getElementById('selected-country-capital'); return selectedCountryName && selectedCountryName.textContent === 'Japan' && selectedCountryCapital && selectedCountryCapital.textContent === 'Capital: Tokyo'; } return false; }\"}]","constraints":"\"country-capital\" (div)This is the main container for the entire component. It wraps around the heading, country list, and selected country details.\"heading\" (h1)This ID is applied to the heading element (<h1>) that displays \"Countries and Capitals\". It represents the title of the list.\"country-list\" (ul)This ID is applied to the unordered list (<ul>) element that contains the list of countries. It represents the container for all the country items.\"country-[id]\" (li)Each country in the list has an ID in the format \"country-[id]\". For example, \"country-1\", \"country-2\", etc.These IDs are applied to the list item (<li>) elements that represent individual countries in the list.They are used to uniquely identify each country in the list.\"selected-country\" (div)This ID is applied to the container (<div>) that displays the details of the selected country.It wraps around the selected country's name and capital.\"selected-country-name\" (h2)This ID is applied to the heading element (<h2>) that displays the name of the selected country.It represents the title for the selected country's details.\"selected-country-capital\" (p)This ID is applied to the paragraph element (<p>) that displays the capital of the selected country.It represents the description or information about the selected country's capital.","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react9","title":"React Task 9","order":"400","problemStatement":"const Component=()=> { const [usd, setUSD] = React.useState(''); const [eur, setEUR] = React.useState(''); const [gbp, setGBP] = React.useState(''); const [jpy, setJPY] = React.useState(''); const [aud, setAUD] = React.useState(''); const handleInputChange = (value, currency) => { const numericValue = parseFloat(value); if (!isNaN(numericValue)) { switch (currency) { case 'usd': setUSD(value); setEUR((numericValue * 0.85).toFixed(2)); setGBP((numericValue * 0.72).toFixed(2)); setJPY((numericValue * 109.89).toFixed(2)); setAUD((numericValue * 1.32).toFixed(2)); break; case 'eur': setUSD((numericValue * 1.18).toFixed(2)); setEUR(value); setGBP((numericValue * 0.85).toFixed(2)); setJPY((numericValue * 129.07).toFixed(2)); setAUD((numericValue * 1.55).toFixed(2)); break; case 'gbp': setUSD((numericValue * 1.39).toFixed(2)); setEUR((numericValue * 1.18).toFixed(2)); setGBP(value); setJPY((numericValue * 151.89).toFixed(2)); setAUD((numericValue * 1.83).toFixed(2)); break; case 'jpy': setUSD((numericValue * 0.0091).toFixed(2)); setEUR((numericValue * 0.0078).toFixed(2)); setGBP((numericValue * 0.0066).toFixed(2)); setJPY(value); setAUD((numericValue * 0.012).toFixed(2)); break; case 'aud': setUSD((numericValue * 0.76).toFixed(2)); setEUR((numericValue * 0.65).toFixed(2)); setGBP((numericValue * 0.55).toFixed(2)); setJPY((numericValue * 82.54).toFixed(2)); setAUD(value); break; default: break; } } }; const inputStyle = { padding: '8px', fontSize: '16px', border: '1px solid #ccc', borderRadius: '4px', marginBottom: '10px', width: '200px', }; return ( <div style={{ fontFamily: 'Arial, sans-serif', textAlign: 'center' }}> <h1>Currency Converter<\/h1> <div> <label>USD:<\/label> <input type=\"number\" value={usd} onChange={(e) => handleInputChange(e.target.value, 'usd')} style={inputStyle} \/> <\/div> <div> <label>EUR:<\/label> <input type=\"number\" value={eur} onChange={(e) => handleInputChange(e.target.value, 'eur')} style={inputStyle} \/> <\/div> <div> <label>GBP:<\/label> <input type=\"number\" value={gbp} onChange={(e) => handleInputChange(e.target.value, 'gbp')} style={inputStyle} \/> <\/div> <div> <label>JPY:<\/label> <input type=\"number\" value={jpy} onChange={(e) => handleInputChange(e.target.value, 'jpy')} style={inputStyle} \/> <\/div> <div> <label>AUD:<\/label> <input type=\"number\" value={aud} onChange={(e) => handleInputChange(e.target.value, 'aud')} style={inputStyle} \/> <\/div> <\/div> );};","testCases":"[{\"name\":\"1\",\"test\":\"() => { return ( document.getElementById('usd').value === '' && document.getElementById('eur').value === '' && document.getElementById('gbp').value === '' && document.getElementById('jpy').value === '' && document.getElementById('aud').value === '' ); }\"},{\"name\":\"2\",\"test\":\"() => { const usdInput = document.getElementById('usd'); usdInput.value = '100'; usdInput.dispatchEvent(new Event('input')); return document.getElementById('eur').value === ''; }\"},{\"name\":\"3\",\"test\":\"() => { const gbpInput = document.getElementById('gbp'); gbpInput.value = '50'; gbpInput.dispatchEvent(new Event('input')); return document.getElementById('usd').value === '100'; }\"}]","constraints":"US Dollar (USD)Converting USD to EUR involves multiplying the USD value by 0.85, GBP by 0.72, JPY by 109.89, and AUD by 1.32.Euro (EUR)Converting EUR to USD requires multiplying the EUR value by 1.18, GBP by 0.85, JPY by 129.07, and AUD by 1.55.British Pound (GBP)Converting GBP to USD requires multiplying the GBP value by 1.39, EUR by 1.18, JPY by 151.89, and AUD by 1.83.Japanese Yen (JPY)Converting JPY to USD involves multiplying the JPY value by 0.0091, EUR by 0.0078, GBP by 0.0066, and AUD by 0.012.Australian Dollar (AUD)Converting AUD to USD involves multiplying the AUD value by 0.76, EUR by 0.65, GBP by 0.55, and JPY by 82.54.each input field is assigned a unique ID (usd, eur, gbp, jpy, aud) ","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"test1","title":"Design 1","order":"-1","problemStatement":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" \/> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/> <title>Document<\/title> <style> body { margin: 0; padding: 0; } .container { border: 6px solid black; display: grid; grid-template: repeat(3, 94px) \/ repeat(3, 194px); width: 600px; height: 300px; } .grid-items { text-align: center; padding: 1rem; font-size: 1rem; color: white; } .item1 { background-color: #ffa500; justify-self: stretch; } .item2 { background-color: rgb(169, 139, 82); align-self: start; justify-self:center } .item3 { background-color: rgb(34, 49, 30); justify-self: stretch; } .item4 { background-color: rgb(92, 46, 207); place-self: center; } .item5 { background-color: rgb(5, 4, 3); } .item6 { background-color: rgb(206, 17, 124); place-self: center; } .item7 { background-color: rgb(53, 248, 235); place-self: start end; } .item8 { background-color: rgb(16, 135, 74); align-self: end; } .item9 { background-color: rgb(216, 54, 54); place-self: start } <\/style> <\/head> <body> <div class=\"container\"> <div class=\"grid-items item1\">Item 1<\/div> <div class=\"grid-items item2\">Item 2<\/div> <div class=\"grid-items item3\">Item 3<\/div> <div class=\"grid-items item4\">Item 4<\/div> <div class=\"grid-items item5\">Item 5<\/div> <div class=\"grid-items item6\">Item 6<\/div> <div class=\"grid-items item7\">Item 7<\/div> <div class=\"grid-items item8\">Item 8<\/div> <div class=\"grid-items item9\">Item 9<\/div> <\/div> <\/body> <\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"colors used:#ffa500 (orange) - Used in .item1 rgb(169, 139, 82) (brownish) - Used in .item2 rgb(34, 49, 30) (dark green) - Used in .item3 rgb(92, 46, 207) (purple) - Used in .item4 rgb(5, 4, 3) (dark gray) - Used in .item5 rgb(206, 17, 124) (pink) - Used in .item6 rgb(53, 248, 235) (cyan) - Used in .item7 rgb(16, 135, 74) (green) - Used in .item8 rgb(216, 54, 54) (red) - Used in .item9","starterCode":"\/\/do the design here","category":"Test","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"trans1","title":"Transition task 1","order":"400","problemStatement":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Card Flip Animation<\/title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; background: linear-gradient(to right, #8360c3, #2ebf91); } .card-container { perspective: 1000px; width: 300px; height: 200px; } .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotateY(0); transition: transform 0.6s ease-in-out; } .card-container:hover .card { transform: rotateY(180deg); } .card-side { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: bold; color: white; } .card-front { background-color: #4caf50; } .card-back { background-color: #2196f3; transform: rotateY(180deg); } <\/style> <\/head> <body> <div class=\"card-container\"> <div class=\"card\"> <div class=\"card-side card-front\">Front Side<\/div> <div class=\"card-side card-back\">Back Side<\/div> <\/div> <\/div> <\/body> <\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Colors: Background Gradient: Gradient from purple to greenish-teal: #8360c3 (purple) #2ebf91 (teal) Card Front Side: Solid green: #4caf50 Card Back Side: Solid blue: #2196f3 Text Color: White: #ffffff Sizes: Card Container: Width: 300px Height: 200px Card: Matches the container: Width: 300px Height: 200px Border Radius: 12px for rounded corners on both front and back sides. Text: Font size: 20px Font weight: bold","starterCode":"\/\/do design here","category":"Transition","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"trans2","title":"Transition Task 2","order":"400","problemStatement":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Rectangle to Circle Hover<\/title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f9; font-family: Arial, sans-serif; } .container { display: flex; justify-content: center; align-items: center; } .rectangle { width: 200px; height: 100px; background-color: #3498db; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 18px; font-weight: bold; text-transform: uppercase; border-radius: 10px; transition: all 0.4s ease; cursor: pointer; } .rectangle:hover { width: 100px; height: 100px; border-radius: 50%; transform: translateY(-50px); } .rectangle:hover span { font-size: 14px; opacity: 0.8; } <\/style> <\/head> <body> <div class=\"container\"> <div class=\"rectangle\"> <span>Hover Me<\/span> <\/div> <\/div> <\/body> <\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Colors Used: Rectangle (Default): #3498db (blue). Text: #ffffff (white). Sizes: Rectangle: Width: 200px. Height: 100px. Circle (on hover): Width: 100px. Height: 100px. Text: Font size: 18px (default). Font size: 14px (on hover).","starterCode":"\/\/write your program here","category":"Transition","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""}]

[{"id":"flex1","title":"Flex Task 1","order":"400","problemStatement":"\n\n\n \n \n Colorful Flexbox Design<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background-color: #1e1e2f; \/* Dark background for contrast *\/\n font-family: Arial, sans-serif;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n width: 600px;\n height: 600px;\n border: 2px solid #444;\n border-radius: 12px;\n overflow: hidden;\n }\n\n header {\n background-color: #ff6f61; \/* Vibrant coral *\/\n color: #fff;\n padding: 1rem;\n text-align: center;\n }\n\n main {\n display: flex;\n flex: 1;\n padding: 1rem;\n gap: 1rem;\n background-color: #5b5f97; \/* Deep purple *\/\n }\n\n .sidebar {\n flex: 1;\n background-color: #ffcc00; \/* Bright yellow *\/\n color: #333;\n padding: 1rem;\n border-radius: 8px;\n }\n\n .content {\n flex: 2;\n background-color: #2ec4b6; \/* Fresh teal *\/\n color: #fff;\n padding: 1rem;\n border-radius: 8px;\n }\n\n footer {\n background-color: #e63946; \/* Vibrant red *\/\n color: #fff;\n text-align: center;\n padding: 1rem;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>Colorful Flexbox Layout<\/h1>\n <\/header>\n <main>\n <div class=\"sidebar\">\n <h2>Sidebar<\/h2>\n <p>This is the sidebar content with a vibrant yellow background.<\/p>\n <\/div>\n <div class=\"content\">\n <h2>Main Content<\/h2>\n <p>This is the main content area with a fresh teal background.<\/p>\n <\/div>\n <\/main>\n <footer>\n <p>© 2025 Colorful Design<\/p>\n <\/footer>\n <\/div>\n<\/body>\n<\/html>\n","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Color Palette: Header: #ff6f61 (Coral Red) Sidebar: #ffcc00 (Bright Yellow) Main Content: #2ec4b6 (Fresh Teal) Main Section Background: #5b5f97 (Deep Purple) Footer: #e63946 (Vibrant Red) Body Background: #1e1e2f (Dark Gray-Blue)","starterCode":"\/\/do your design here","category":"Flex_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"flex2","title":"Flex Task 2","order":"400","problemStatement":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Task Management Dashboard<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: Arial, sans-serif;\n background-color: #121212; \/* Dark Gray Background *\/\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n padding: 20px;\n }\n\n .dashboard {\n display: flex;\n flex-direction: column;\n gap: 15px;\n width: 100%;\n max-width: 600px; \/* Set width to 600px *\/\n max-height: 600px; \/* Set height to 600px *\/\n background-color: #1e1e1e; \/* Slightly darker gray for the container *\/\n border-radius: 12px;\n padding: 15px;\n overflow-y: auto; \/* Allow scroll if content overflows *\/\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px;\n background-color: #1976d2; \/* Blue Header *\/\n border-radius: 10px;\n }\n\n .header h1 {\n font-size: 1.3rem;\n word-wrap: break-word;\n }\n\n .header button {\n background-color: #fbc02d; \/* Yellow Button *\/\n color: black;\n padding: 8px 16px;\n border: none;\n border-radius: 5px;\n font-weight: bold;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n\n .header button:hover {\n background-color: #f9a825; \/* Darker Yellow on Hover *\/\n }\n\n .tasks {\n display: flex;\n gap: 15px;\n justify-content: space-between;\n flex-wrap: wrap; \/* Allow tasks to wrap within the available space *\/\n }\n\n .column {\n flex: 1;\n min-width: 120px; \/* Set minimum width to ensure responsive layout *\/\n max-width: 180px; \/* Set maximum width for columns *\/\n display: flex;\n flex-direction: column;\n gap: 12px;\n background-color: #333333; \/* Dark Gray Card Background *\/\n border-radius: 8px;\n padding: 12px;\n overflow-y: auto;\n }\n\n .column h2 {\n text-align: center;\n background-color: #388e3c; \/* Green Header for Columns *\/\n padding: 8px;\n border-radius: 6px;\n font-size: 1.1rem;\n }\n\n .task {\n padding: 10px;\n background-color: #8e24aa; \/* Purple Task Background *\/\n border-radius: 6px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n font-size: 0.9rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n }\n\n .task:hover {\n background-color: #7b1fa2; \/* Darker Purple on Hover *\/\n }\n\n .task button {\n background-color: #0288d1; \/* Blue Button for Actions *\/\n color: white;\n border: none;\n padding: 6px 10px;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n\n .task button:hover {\n background-color: #0277bd; \/* Darker Blue on Hover *\/\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"dashboard\">\n \n <div class=\"header\">\n <h1>Task Management<\/h1>\n <button>Add New Task<\/button>\n <\/div>\n\n \n <div class=\"tasks\">\n \n <div class=\"column\">\n <h2>To Do<\/h2>\n <div class=\"task\">\n <span>Design the homepage<\/span>\n <button>Start<\/button>\n <\/div>\n <div class=\"task\">\n <span>Write API documentation<\/span>\n <button>Start<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"column\">\n <h2>In Progress<\/h2>\n <div class=\"task\">\n <span>Develop user authentication<\/span>\n <button>Finish<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"column\">\n <h2>Done<\/h2>\n <div class=\"task\">\n <span>Setup project repo","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Background Color: #121212 (Dark Gray) for the body and #1e1e1e for the dashboard container. Header Background: #1976d2 (Blue). Button Color (Main): #fbc02d (Yellow). Button Hover: #f9a825 (Darker Yellow). Column Header (Green): #388e3c. Task Background: #8e24aa (Purple). Task Hover: #7b1fa2 (Darker Purple). Button Inside Task: #0288d1 (Blue).","starterCode":"\/\/do the design here","category":"Flex_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":null},{"id":"flex3","title":"Flex Task 3","order":"400","problemStatement":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Responsive Product Cards<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Arial', sans-serif;\n background-color: #2c3e50; \/* Dark Blue background *\/\n color: #ecf0f1; \/* Light text color *\/\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n padding: 20px;\n }\n\n .product-container {\n display: flex;\n flex-wrap: wrap;\n gap: 20px; \/* Space between cards *\/\n justify-content: center;\n max-width: 600px; \/* Limit width to 600px *\/\n max-height: 600px; \/* Limit height to 600px *\/\n margin: 0 auto;\n overflow: hidden; \/* Prevent overflow *\/\n }\n\n .product-card {\n background-color: #34495e; \/* Dark gray background for cards *\/\n border-radius: 10px;\n overflow: hidden;\n width: calc(33% - 20px); \/* Three cards per row with some gap *\/\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);\n transition: transform 0.3s ease-in-out;\n }\n\n .product-card:hover {\n transform: translateY(-10px); \/* Hover effect *\/\n }\n\n .product-info {\n padding: 15px;\n }\n\n .product-title {\n font-size: 1.1rem;\n font-weight: bold;\n color: #f39c12; \/* Orange color for title *\/\n margin-bottom: 10px;\n }\n\n .product-description {\n font-size: 0.9rem;\n color: #bdc3c7; \/* Lighter gray for description *\/\n margin-bottom: 10px;\n }\n\n .product-price {\n font-size: 1.2rem;\n font-weight: bold;\n color: #e74c3c; \/* Red color for price *\/\n }\n\n \/* Responsive Styles *\/\n @media (max-width: 480px) {\n .product-card {\n width: 100%; \/* One card per row on small screens *\/\n }\n }\n\n <\/style>\n<\/head>\n<body>\n\n <div class=\"product-container\">\n \n <div class=\"product-card\">\n <div class=\"product-info\">\n <h3 class=\"product-title\">Product One<\/h3>\n <p class=\"product-description\">This is a brief description of product one. It has various features.<\/p>\n <p class=\"product-price\">$49.99<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card\">\n <div class=\"product-info\">\n <h3 class=\"product-title\">Product Two<\/h3>\n <p class=\"product-description\">Product two offers great value with amazing features for your needs.<\/p>\n <p class=\"product-price\">$79.99<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card\">\n <div class=\"product-info\">\n <h3 class=\"product-title\">Product Three<\/h3>\n <p class=\"product-description\">This product is highly recommended for its quality and performance.<\/p>\n <p class=\"product-price\">$99.99<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n<\/body>\n<\/html>\n","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Body Background: #2c3e50 (Dark Blue) Product Card Background: #34495e (Dark Gray) Text Color: #ecf0f1 (Light Gray for the text) Product Title: #f39c12 (Bright Orange) Product Price: #e74c3c (Red) Product Description: #bdc3c7 (Light Gray)","starterCode":"\/\/do design here","category":"Flex_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"grid1","title":"Grid Task 1","order":"400","problemStatement":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" \/> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/> <title>Document<\/title> <style> body { margin: 0; padding: 0; } .container { border: 6px solid black; display: grid; grid-template: repeat(3, 94px) \/ repeat(3, 194px); width: 600px; height: 300px; } .grid-items { text-align: center; padding: 1rem; font-size: 1rem; color: white; } .item1 { background-color: #ffa500; justify-self: start; } .item2 { background-color: rgb(169, 139, 82); align-self: start; } .item3 { background-color: rgb(34, 49, 30); justify-self: end; } .item4 { background-color: rgb(92, 46, 207); place-self: center; } .item5 { background-color: rgb(5, 4, 3); } .item6 { background-color: rgb(206, 17, 124); place-self: center; } .item7 { background-color: rgb(53, 248, 235); justify-self: start; } .item8 { background-color: rgb(16, 135, 74); align-self: end; } .item9 { background-color: rgb(216, 54, 54); justify-self: end; } <\/style> <\/head> <body> <div class=\"container\"> <div class=\"grid-items item1\">Item 1<\/div> <div class=\"grid-items item2\">Item 2<\/div> <div class=\"grid-items item3\">Item 3<\/div> <div class=\"grid-items item4\">Item 4<\/div> <div class=\"grid-items item5\">Item 5<\/div> <div class=\"grid-items item6\">Item 6<\/div> <div class=\"grid-items item7\">Item 7<\/div> <div class=\"grid-items item8\">Item 8<\/div> <div class=\"grid-items item9\">Item 9<\/div> <\/div> <\/body> <\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"colors used:#ffa500 (orange) - Used in .item1 rgb(169, 139, 82) (brownish) - Used in .item2 rgb(34, 49, 30) (dark green) - Used in .item3 rgb(92, 46, 207) (purple) - Used in .item4 rgb(5, 4, 3) (dark gray) - Used in .item5 rgb(206, 17, 124) (pink) - Used in .item6 rgb(53, 248, 235) (cyan) - Used in .item7 rgb(16, 135, 74) (green) - Used in .item8 rgb(216, 54, 54) (red) - Used in .item9","starterCode":"<!DOCTYPE html><html><head><style><\/style><\/head><body><\/body><\/html>","category":"Grid_Box","difficulty":"medium","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"grid2","title":"Grid Task 2","order":"400","problemStatement":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Complex Window Design<\/title> <style> body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #ecf0f1; display: flex; align-items: center; justify-content: center; height: 100vh; } .window { width: 600px; min-height: 300px; background-color: #ffffff; border: 1px solid #bdc3c7; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; flex-direction: column; } .window-header { background-color: #3498db; color: #ffffff; padding: 12px; text-align: center; border-top-left-radius: 8px; border-top-right-radius: 8px; } .close-button { background-color: #e74c3c; color: #fff; border: none; padding: 8px; border-radius: 4px; cursor: pointer; margin-left: auto; } .window-content { padding: 20px; flex-grow: 1; } .button { display: inline-block; padding: 10px 20px; font-size: 16px; margin: 10px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } .button-primary { background-color: #3498db; color: #ffffff; } .button-secondary { background-color: #2ecc71; color: #ffffff; } <\/style> <\/head> <body> <div class=\"window\"> <div class=\"window-header\"> <span>Complex Window<\/span> <button class=\"close-button\" onclick=\"closeWindow()\">X<\/button> <\/div> <div class=\"window-content\"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni sit ut nobis molestias nesciunt sunt eaque autem necessitatibus, earum vero minus tempore adipisci totam, quia corrupti debitis quas est. Ut.<\/p> <button class=\"button button-primary\">Primary Button<\/button> <button class=\"button button-secondary\">Secondary Button<\/button> <\/div> <\/div> <\/body> <\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"colors used:Body background color: #ecf0f1 Window background color: #ffffff Window border color: #bdc3c7 Window header background color: #3498db Window header text color: #ffffff Close button background color: #e74c3c Close button text color: #fff Primary button background color: #3498db Primary button text color: #ffffff Secondary button background color: #2ecc71 Secondary button text color: #ffffff","starterCode":"<!DOCTYPE html><html><head><style><\/style><\/head><body><\/body><\/html>","category":"Grid_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"grid3","title":"Grid Task 3","order":"400","problemStatement":"<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <style> body { margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #f0f0f0; } .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; width: 600px; height: 300px; border: 2px solid #333; border-radius: 8px; overflow: hidden; } .grid-item { padding: 20px; box-sizing: border-box; text-align: center; background-color: #d3d3d3; border-radius: 8px; } .grid-item:nth-child(odd) { background-color: #a9a9a9; } <\/style><\/head><body><div class=\"grid-container\"> <div class=\"grid-item\">Item 1<\/div> <div class=\"grid-item\">Item 2<\/div> <div class=\"grid-item\">Item 3<\/div> <div class=\"grid-item\">Item 4<\/div> <div class=\"grid-item\">Item 5<\/div> <div class=\"grid-item\">Item 6<\/div><\/div><\/body><\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"colors used : Background color of the body: background-color: #f0f0f0; (light gray) Background colors of the grid items: Odd-numbered items: background-color: #d3d3d3; (light gray) Even-numbered items: background-color: #a9a9a9; (dark gray) Border color of the grid container: border: 2px solid #333; (black)","starterCode":"<!DOCTYPE html><html><head><style><\/style><\/head><body><\/body><\/html>","category":"Grid_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"grid4","title":"Grid Task 4","order":"400","problemStatement":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Different Window Design<\/title> <style> body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #2c3e50; display: flex; align-items: center; justify-content: center; height: 100vh; } .window { width: 400px; height: 300px; background-color: #34495e; border: 2px solid #2c3e50; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; color: #ecf0f1; } .header { background-color: #3498db; padding: 15px; text-align: center; font-size: 24px; border-bottom: 2px solid #2c3e50; } .content { flex-grow: 1; padding: 20px; line-height: 1.6; } .footer { background-color: #3498db; padding: 15px; text-align: center; border-top: 2px solid #2c3e50; } .button { padding: 10px 20px; margin: 10px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; } .button-primary { background-color: #e74c3c; color: #ffffff; } .button-secondary { background-color: #27ae60; color: #ffffff; } <\/style> <\/head> <body> <div class=\"window\"> <div class=\"header\">Different Window<\/div> <div class=\"content\"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates dolore nesciunt ratione earum blanditiis a.<\/p> <p>You can customize this design further based on your preferences.<\/p> <\/div> <div class=\"footer\"> <button class=\"button button-primary\">Primary Button<\/button> <button class=\"button button-secondary\">Secondary Button<\/button> <\/div> <\/div> <\/body> <\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Background color for the body: #2c3e50 Background color for the window: #34495e Header and footer background color: #3498db Border color for the window: #2c3e50 Text color for the content: #ecf0f1","starterCode":"<!DOCTYPE html><html><head><style><\/style><\/head><body><\/body><\/html>","category":"Grid_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"grid5","title":"Grid Task 5","order":"400","problemStatement":"<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Responsive Frame<\/title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .container { display: flex; max-width: 600px; margin: 20px auto; background-color: #f0f0f0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); height: 300px; } .left-side { flex: 1; padding: 20px; } .right-side { flex: 1; overflow: hidden; position: relative; } .right-side img { width: 100%; height: 100%; object-fit: cover; } h2 { margin-top: 0; } p { margin-bottom: 20px; } button { padding: 10px; background-color: #4CAF50; color: #fff; border: none; cursor: pointer; border-radius: 5px; } <\/style><\/head><body> <div class=\"container\"> <div class=\"left-side\"> <h2>Title<\/h2> <p>Content and description go here.<\/p> <button>Click me<\/button> <\/div> <div class=\"right-side\"> <img src=\" https:\/\/mernapi.evorieainfotechpvtltd.com\/documents\/tree.jpg\" alt=\"Image\"> <\/div> <\/div><\/body><\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Things used: Background color of the container: #f0f0f0 Button background color: #4CAF50 Button text color: #fff image used:https:\/\/mernapi.evorieainfotechpvtltd.com\/documents\/tree.jpg","starterCode":"<!DOCTYPE html><html><head><style><\/style><\/head><body><img src=\"https:\/\/mernapi.evorieainfotechpvtltd.com\/documents\/tree.jpg\" alt=\"Image\"><\/body><\/html>","category":"Grid_Box","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":null},{"id":"Hello_World","title":"Hello World","order":"400","problemStatement":"We all know that the input and output functionality forms the basics of any programming language. As a universal practice, let us begin with this - Write a program to print \"Hello World!\".","testCases":"[{\"id\":\"1\",\"inputText\":\"Hello World!\",\"outputText\":\"Hello World!\"},{\"id\":\"2\",\"inputText\":\"Hello World!\",\"outputText\":\"Hello World!\"}]","constraints":"No constraints","starterCode":"\/\/write your program here","category":"Input_Output","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":null},{"id":"html1","title":"HTML task 1","order":"400","problemStatement":"<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Form with Dark Green Background<\/title>\r\n <style>\r\n body {\r\n background-color: #013220; \/* Dark green background *\/\r\n font-family: Arial, sans-serif;\r\n padding: 20px;\r\n margin: 0;\r\n }\r\n\r\n form {\r\n background-color: #ff0000; \/* Red background for the form *\/\r\n padding: 20px;\r\n border-radius: 10px;\r\n max-width: 400px;\r\n margin: 50px auto;\r\n color: white; \/* White text inside the form *\/\r\n box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n label {\r\n font-weight: bold;\r\n display: block;\r\n margin-bottom: 8px;\r\n }\r\n\r\n input[type=\"text\"],\r\n input[type=\"email\"],\r\n textarea {\r\n width: 100%;\r\n padding: 10px;\r\n margin-bottom: 15px;\r\n border: 1px solid white; \/* White borders *\/\r\n border-radius: 5px;\r\n background-color: #ffffff; \/* White input background *\/\r\n color: black; \/* Black text inside inputs *\/\r\n box-sizing: border-box;\r\n }\r\n\r\n input[type=\"submit\"] {\r\n background-color: white; \/* White button *\/\r\n color: red; \/* Red text for button *\/\r\n padding: 10px 20px;\r\n border: 2px solid white;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n transition: background-color 0.3s ease, color 0.3s ease;\r\n }\r\n\r\n input[type=\"submit\"]:hover {\r\n background-color: #013220; \/* Dark green on hover *\/\r\n color: white; \/* White text on hover *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <form>\r\n <label for=\"name\">Name:<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" required>\r\n\r\n <label for=\"email\">Email:<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" required>\r\n\r\n <label for=\"message\">Message:<\/label>\r\n <textarea id=\"message\" name=\"message\" rows=\"4\" required><\/textarea>\r\n\r\n <input type=\"submit\" value=\"Submit\">\r\n <\/form>\r\n<\/body>\r\n<\/html>\r\n","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Background of the Body: Color: #013220 Description: Dark green. Form Background: Color: #ff0000 Description: Bright red. Text Inside the Form: Color: white Description: White text. Borders of Input Fields and Textarea: Color: white Description: White borders. Background of Input Fields and Textarea: Color: #ffffff Description: White. Text Inside Input Fields and Textarea: Color: black Description: Black text. Submit Button Background: Color: white Description: White background. Submit Button Text: Color: red Description: Red text","starterCode":"\/\/write your program here","category":"HTML","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":null},{"id":"html2","title":"HTML Task 2","order":"400","problemStatement":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Styled Table with Style Tag<\/title>\n <style>\n table {\n width: 100%;\n border-collapse: collapse;\n margin: 20px auto;\n text-align: left;\n font-family: Arial, sans-serif;\n }\n th, td {\n padding: 10px;\n border: 1px solid #ddd;\n }\n thead tr {\n background-color: #4CAF50;\n color: white;\n }\n tbody tr:nth-child(even) {\n background-color: #f2f2f2;\n }\n tbody tr:nth-child(odd) {\n background-color: #ffffff;\n }\n <\/style>\n<\/head>\n<body>\n <table>\n <thead>\n <tr>\n <th>Name<\/th>\n <th>Age<\/th>\n <th>City<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>John<\/td>\n <td>25<\/td>\n <td>New York<\/td>\n <\/tr>\n <tr>\n <td>Jane<\/td>\n <td>30<\/td>\n <td>Los Angeles<\/td>\n <\/tr>\n <tr>\n <td>Mike<\/td>\n <td>28<\/td>\n <td>Chicago<\/td>\n <\/tr>\n <tr>\n <td>Anna<\/td>\n <td>22<\/td>\n <td>Miami<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n<\/body>\n<\/html>\n","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Header Row Background (Table Header): Color: #4CAF50 Description: Green. Header Row Text Color (Table Header): Color: white Description: White text. Even Rows Background (Table Body): Color: #f2f2f2 Description: Light gray. Odd Rows Background (Table Body): Color: #ffffff Description: White. Cell Borders (Table Cells): Color: #ddd Description: Light gray border.","starterCode":"\/\/write your program here","category":"HTML","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":null},{"id":"html4","title":"HTML Task 3","order":"400","problemStatement":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Styled List<\/title>\n <style>\n body {\n background-color: red; \/* Blue background *\/\n margin: 0;\n padding: 0;\n font-family: Arial, sans-serif;\n }\n ul {\n list-style-type: none; \/* Remove default bullets *\/\n padding: 0;\n max-width: 400px;\n margin: 50px auto; \/* Center the list with a top margin *\/\n font-family: Arial, sans-serif;\n border: 2px solid #4CAF50; \/* Green border for the list *\/\n border-radius: 8px;\n background-color: white; \/* White background for the list *\/\n }\n li {\n padding: 15px;\n border-bottom: 1px solid #ddd; \/* Border between items *\/\n }\n li:nth-child(even) {\n background-color: #f2f2f2; \/* Light grey for even items *\/\n }\n li:nth-child(odd) {\n background-color: #ffffff; \/* White for odd items *\/\n }\n li:last-child {\n border-bottom: none; \/* Remove border for the last item *\/\n }\n h2 {\n background-color: #4CAF50; \/* Green background for the header *\/\n color: white;\n padding: 10px;\n text-align: center;\n margin: 0;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n }\n <\/style>\n<\/head>\n<body>\n <ul>\n <h2>Shopping List<\/h2>\n <li>Apples<\/li>\n <li>Bananas<\/li>\n <li>Carrots<\/li>\n <li>Tomatoes<\/li>\n <li>Potatoes<\/li>\n <li>Milk<\/li>\n <\/ul>\n<\/body>\n<\/html>\n","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Body Background: Color: red Description: Bright red background for the entire page. List Border (ul): Color: #4CAF50 Description: Green border for the list. List Background (ul): Color: white Description: White background for the entire list container. Even List Items Background (li:nth-child(even)): Color: #f2f2f2 Description: Light gray background for even-numbered items. Odd List Items Background (li:nth-child(odd)): Color: #ffffff Description: White background for odd-numbered items. List Item Borders (li): Color: #ddd Description: Light gray borders between list items. Header Background (h2): Color: #4CAF50 Description: Green background for the header. Header Text (h2): Color: white Description: White text for the header.","starterCode":"\/\/write your program here","category":"HTML","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":null},{"id":"html5","title":"HTML Task 4","order":"400","problemStatement":"<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n <style>\n .box{\n width: 500px;\n height: 250px;\n background: repeating-radial-gradient(blue 10px,blue 20px,green 10px,green 30px);\n}\n <\/style>\n<\/head>\n\n<body>\n <div class=\"box\">\n \n <\/div>\n\n<br>\n<br>\n<br>\n<br>\n<br>\n<\/body>\n\n<\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"width-->500px height -->250px color used blue and green","starterCode":"\/\/write your program here","category":"HTML","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"qqq","title":"qwwqwq","order":"400","problemStatement":"wqwqrwqwqeeqw","testCases":"[{\"name\":\"rqwrqw\",\"test\":\"rqwqrw\"},{\"name\":\"rwqrwq\",\"test\":\"rqwrwqrwq\"}]","constraints":"No constraints","starterCode":"\/\/write your program here","category":"test","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react1","title":"React Task 1","order":"300","problemStatement":"const Component = () => { const [count, setCount] = React.useState(0); const incrementCount = () => { setCount(count + 1); }; const decrementCount = () => { if (count > 0) { setCount(count - 1); } }; const buttonStyle = { border: '2px solid #007bff', borderRadius: '5px', background: 'none', color: '#007bff', padding: '5px 10px', cursor: 'pointer', fontSize: '16px', transition: 'background 0.3s, color 0.3s', }; return ( <div style={{ textAlign: 'center', marginTop: '20px' }}> <h2>Click Counter<\/h2> <div style={{ marginBottom: '10px' }}> <button onClick={decrementCount} style={buttonStyle}> - <\/button> <span style={{ fontSize: '20px', fontWeight: 'bold', margin: '0 10px' }}>{count}<\/span> <button onClick={incrementCount} style={buttonStyle}> + <\/button> <\/div> <\/div> ); };","testCases":"[\r\n {\r\n \"name\": \"1\",\r\n \"test\": \"() => { return document.getElementById('count')?.textContent === '0'; }\"\r\n },\r\n {\r\n \"name\": \"2\",\r\n \"test\": \"() => { const incrementButton = document.getElementById('increment'); if (incrementButton) { incrementButton.click(); return document.getElementById('count')?.textContent === '1'; } return false; }\"\r\n },\r\n {\r\n \"name\": \"3\",\r\n \"test\": \"() => { const decrementButton = document.getElementById('decrement'); if (decrementButton) { decrementButton.click(); return document.getElementById('count')?.textContent === '0'; } return false; }\"\r\n }\r\n]\r\n","constraints":"Refer the expected output for sample Important: give the + button id as 'increment' - button id as 'decrement' and id for number display as 'count'","starterCode":"const Component=()=>{\r\n return(\r\n <div>\r\n Hello\r\n <\/div>\r\n )\r\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react10","title":"React Task 10","order":"400","problemStatement":"\r\nconst Component = () => {\r\n const [tasks, setTasks] = React.useState([]);\r\n const [taskName, setTaskName] = React.useState(\"\");\r\n const [taskPriority, setTaskPriority] = React.useState(\"Low\");\r\n\r\n const handleAddTask = () => {\r\n if (!taskName) return; \/\/ Don't add empty task\r\n\r\n const newTask = {\r\n id: tasks.length + 1,\r\n name: taskName,\r\n priority: taskPriority,\r\n };\r\n\r\n setTasks([...tasks, newTask]);\r\n setTaskName(\"\");\r\n };\r\n\r\n const containerStyle = { textAlign: \"center\" };\r\n const inputContainerStyle = { margin: \"20px 0\" };\r\n const inputStyle = { padding: \"10px\", marginRight: \"10px\" };\r\n const selectStyle = { padding: \"10px\" };\r\n const buttonStyle = {\r\n padding: \"10px 20px\",\r\n background: \"#007bff\",\r\n color: \"#fff\",\r\n border: \"none\",\r\n borderRadius: \"5px\",\r\n cursor: \"pointer\",\r\n };\r\n const taskListStyle = {\r\n display: \"flex\",\r\n justifyContent: \"space-around\",\r\n marginTop: \"20px\",\r\n };\r\n const listStyle = {\r\n flex: \"1\",\r\n margin: \"0 10px\",\r\n padding: \"20px\",\r\n border: \"1px solid #ccc\",\r\n borderRadius: \"5px\",\r\n boxShadow: \"0 2px 4px rgba(0, 0, 0, 0.1)\",\r\n };\r\n const headingStyle = { marginTop: \"0\" };\r\n\r\n return (\r\n <div style={containerStyle}>\r\n <h1>Task Manager<\/h1>\r\n\r\n <div style={inputContainerStyle}>\r\n <input\r\n type=\"text\"\r\n value={taskName}\r\n onChange={(e) => setTaskName(e.target.value)}\r\n placeholder=\"Enter task name\"\r\n style={inputStyle}\r\n \/>\r\n\r\n <select\r\n value={taskPriority}\r\n onChange={(e) => setTaskPriority(e.target.value)}\r\n style={selectStyle}\r\n >\r\n <option value=\"Low\">Low<\/option>\r\n <option value=\"Medium\">Medium<\/option>\r\n <option value=\"High\">High<\/option>\r\n <\/select>\r\n\r\n <button onClick={handleAddTask} style={buttonStyle}>\r\n Add Task\r\n <\/button>\r\n <\/div>\r\n\r\n <div style={taskListStyle}>\r\n {[\"Low\", \"Medium\", \"High\"].map((priority) => (\r\n <div key={priority} style={listStyle}>\r\n <h2 style={headingStyle}>{priority} Priority Tasks<\/h2>\r\n {tasks\r\n .filter((task) => task.priority === priority)\r\n .map((task) => (\r\n <div key={task.id}>{task.name}<\/div>\r\n ))}\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n );\r\n};\r\n\r\n","testCases":"[{\"name\":\"1\",\"test\":\"() => { const inputElement = document.getElementById('task-input'); const addButton = document.getElementById('add-task-btn'); inputElement.value = 'New Task'; addButton.click(); return document.querySelectorAll('.task-item').length === 0; }\"},{\"name\":\"2\",\"test\":\"() => { const selectElement = document.getElementById('priority-select'); selectElement.value = 'High'; selectElement.dispatchEvent(new Event('change', { bubbles: true })); return document.getElementById('high-priority-list').querySelectorAll('.task-item').length === 0; }\"},{\"name\":\"3\",\"test\":\"() => { const lowPriorityList = document.getElementById('low-priority-list').querySelectorAll('.task-item'); const mediumPriorityList = document.getElementById('medium-priority-list').querySelectorAll('.task-item'); const highPriorityList = document.getElementById('high-priority-list').querySelectorAll('.task-item'); return lowPriorityList.length === 0 && mediumPriorityList.length === 0 && highPriorityList.length === 0; }\"}]","constraints":"App Container ID:id: appUsage: Represents the main container of the application.Heading ID:id: headingUsage: Represents the heading of the application.Input Container ID:id: input-containerUsage: Represents the container for input elements (task name input field, priority select dropdown, and add task button).Task Input ID:id: task-inputUsage: Represents the input field where users enter the task name.Priority Select ID:id: priority-selectUsage: Represents the select dropdown for selecting the task priority.Add Task Button ID:id: add-task-btnUsage: Represents the button used to add a new task.Task Lists Container ID:id: task-listsUsage: Represents the container for task lists (low priority, medium priority, and high priority).Low Priority Task List ID:id: low-priority-listUsage: Represents the list of tasks with low priority.Medium Priority Task List ID:id: medium-priority-listUsage: Represents the list of tasks with medium priority.High Priority Task List ID:id: high-priority-listUsage: Represents the list of tasks with high priority.Task Item Class:class: task-itemUsage: Represents individual task items within the task lists.","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react2","title":"React Task 2","order":"300","problemStatement":"const Component = () => {\r\n const [usdAmount, setUsdAmount] = React.useState('0');\r\n const [inrAmount, setInrAmount] = React.useState('');\r\n\r\n const convertToINR = () => {\r\n const usdToInrRate = 83.62;\r\n const convertedAmount = parseFloat(usdAmount) * usdToInrRate;\r\n setInrAmount(convertedAmount.toFixed(2));\r\n };\r\n\r\n return (\r\n <div style={{ fontFamily: 'Arial', padding: '20px', textAlign: 'center' }}>\r\n <h2>USD to INR Converter<\/h2>\r\n\r\n <input\r\n type=\"number\"\r\n placeholder=\"Enter amount in USD\"\r\n value={usdAmount}\r\n onChange={(e) => setUsdAmount(e.target.value)}\r\n style={{\r\n padding: '10px',\r\n margin: '10px',\r\n fontSize: '16px',\r\n width: '200px',\r\n }}\r\n \/>\r\n\r\n <button\r\n onClick={convertToINR}\r\n style={{\r\n padding: '10px 20px',\r\n fontSize: '16px',\r\n backgroundColor: '#007bff',\r\n color: '#fff',\r\n border: 'none',\r\n borderRadius: '5px',\r\n cursor: 'pointer',\r\n }}\r\n >\r\n Convert\r\n <\/button>\r\n\r\n {inrAmount && (\r\n <p style={{ fontSize: '20px', marginTop: '20px' }}>\r\n {usdAmount} USD = {inrAmount} INR\r\n <\/p>\r\n )}\r\n <\/div>\r\n );\r\n};","testCases":"[{\"name\":\"1\",\"test\":\"() => { const usdInput = document.getElementById('usdAmount'); if (usdInput) { usdInput.value = '50'; return true; } return false; }\"},{\"name\":\"2\",\"test\":\"() => { const convertButton = document.getElementById('convertButton'); if (convertButton) { convertButton.click(); return document.getElementById('convertedAmount')?.textContent === '0 USD = 0.00 INR'; } return false; }\"},{\"name\":\"3\",\"test\":\"() => { const usdInput = document.getElementById('usdAmount'); if (usdInput) { usdInput.value = '50'; return true; } return false; }\"}]","constraints":"The input field has the ID usdAmount. The button to trigger the conversion has the ID convertButton. The paragraph where the converted amount is displayed has the ID convertedAmount. The parent div wrapping the entire component has the ID currencyConverter. Currency conversion rate is \"83.62\"","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react3","title":"React Task 3","order":"300","problemStatement":"const Component = () => { const [input, setInput] = React.useState(''); const buttonStyle = { padding: '10px 20px', fontSize: '16px', backgroundColor: '#007bff', color: '#fff', border: 'none', borderRadius: '5px', cursor: 'pointer', margin: '5px' }; const inputStyle = { padding: '10px', margin: '10px', fontSize: '16px', width: '200px', border: '1px solid black' }; return ( <div> <h1 style={{ fontFamily: 'Arial' }}>Calculator<\/h1> <input type='text' value={input} onChange={(e) => setInput(e.target.value)} style={inputStyle} \/> <br \/> <button style={buttonStyle} onClick={() => setInput(input + '1')}>1<\/button> <button style={buttonStyle} onClick={() => setInput(input + '2')}>2<\/button> <button style={buttonStyle} onClick={() => setInput(input + '3')}>3<\/button> <button style={buttonStyle} onClick={() => setInput(input + '4')}>4<\/button> <button style={buttonStyle} onClick={() => setInput(input + '5')}>5<\/button> <br \/> <button style={buttonStyle} onClick={() => setInput(input + '6')}>6<\/button> <button style={buttonStyle} onClick={() => setInput(input + '7')}>7<\/button> <button style={buttonStyle} onClick={() => setInput(input + '8')}>8<\/button> <button style={buttonStyle} onClick={() => setInput(input + '9')}>9<\/button> <button style={buttonStyle} onClick={() => setInput(input + '0')}>0<\/button> <br \/> <button style={buttonStyle} onClick={() => setInput(input + '+')}>+<\/button> <button style={buttonStyle} onClick={() => setInput(input + '-')}>-<\/button> <button style={buttonStyle} onClick={() => setInput(input + '*')}>*<\/button> <button style={buttonStyle} onClick={() => setInput(input + '\/')}>\/<\/button> <button style={buttonStyle} onClick={() => setInput(eval(input))}>=<\/button> <button style={buttonStyle} onClick={() => setInput('')}>C<\/button> <\/div> ); };","testCases":"[{\"name\":\"1\",\"test\":\"() => { const usdInput = document.getElementById('input1'); if (usdInput) { usdInput.value = ''; const btn1 = document.getElementById('btn-1'); if (btn1) { btn1.click(); return usdInput.value === '1'; } } return false; }\"},{\"name\":\"2\",\"test\":\"() => { const usdInput = document.getElementById('input1'); if (usdInput) { usdInput.value = ''; const btn1 = document.getElementById('btn-1'); const btnPlus = document.getElementById('btn-plus'); const btn2 = document.getElementById('btn-2'); const btnEquals = document.getElementById('btn-equals'); if (btn1 && btn2 && btnPlus && btnEquals) { btn1.click(); btnPlus.click(); btn2.click(); btnEquals.click(); return usdInput.value === '13'; } } return false; }\"},{\"name\":\"3\",\"test\":\"() => { const usdInput = document.getElementById('input1'); if (usdInput) { usdInput.value = ''; const btnClear = document.getElementById('btn-clear'); if (btnClear) { btnClear.click(); return usdInput.value === ''; } } return false; }\"},{\"name\":\"4\",\"test\":\"() => { const usdInput = document.getElementById('input1'); if (usdInput) { usdInput.value = ''; const btn5 = document.getElementById('btn-5'); const btnDiv = document.getElementById('btn-divide'); const btn2 = document.getElementById('btn-2'); const btnEquals = document.getElementById('btn-equals'); if (btn5 && btnDiv && btn2) { btn5.click(); btnDiv.click(); btn2.click(); btnEquals.click(); return usdInput.value === '2.5'; } } return false; }\"}]","constraints":"IDs: input1:Input field id btn-1: Button for number 1 btn-2: Button for number 2 btn-3: Button for number 3 btn-4: Button for number 4 btn-5: Button for number 5 btn-6: Button for number 6 btn-7: Button for number 7 btn-8: Button for number 8 btn-9: Button for number 9 btn-0: Button for number 0 btn-plus: Button for addition (+) btn-minus: Button for subtraction (-) btn-multiply: Button for multiplication (*) btn-divide: Button for division (\/) btn-equals: Button for equals (=) btn-clear: Button for clearing the input (C)","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"medium","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react4","title":"React Task 4","order":"600","problemStatement":"const Component = () => { const [inputValue, setInputValue] = React.useState(''); const [textareaValue, setTextareaValue] = React.useState(''); const [selectValue, setSelectValue] = React.useState(''); const [output, setOutput] = React.useState(''); const handleSubmit = (e) => { e.preventDefault(); const outputText = `Input: ${inputValue}\\nTextarea: ${textareaValue}\\nSelect: ${selectValue}`; setOutput(outputText); }; return ( <div style={{ textAlign: 'center' }}> <form onSubmit={handleSubmit} style={{ margin: '20px auto', maxWidth: '400px', backgroundColor: '#e0f2f1', padding: '30px', borderRadius: '10px' }}> <div style={{ marginBottom: '20px' }}> <label htmlFor=\"inputField\" style={{ display: 'block', marginBottom: '5px' }}>Input:<\/label> <input type=\"text\" value={inputValue} onChange={(e) => setInputValue(e.target.value)} style={{ width: '100%', padding: '10px', border: '1px solid #90a4ae', borderRadius: '5px' }} \/> <\/div> <div style={{ marginBottom: '20px' }}> <label htmlFor=\"textareaField\" style={{ display: 'block', marginBottom: '5px' }}>Textarea:<\/label> <textarea value={textareaValue} onChange={(e) => setTextareaValue(e.target.value)} style={{ width: '100%', padding: '10px', border: '1px solid #90a4ae', borderRadius: '5px', minHeight: '100px' }} \/> <\/div> <div style={{ marginBottom: '20px' }}> <label htmlFor=\"selectField\" style={{ display: 'block', marginBottom: '5px' }}>Select:<\/label> <select value={selectValue} onChange={(e) => setSelectValue(e.target.value)} style={{ width: '100%', padding: '10px', border: '1px solid #90a4ae', borderRadius: '5px' }} > <option value=\"\">Select an option<\/option> <option value=\"option1\">Option 1<\/option> <option value=\"option2\">Option 2<\/option> <option value=\"option3\">Option 3<\/option> <\/select> <\/div> <button type=\"submit\" style={{ padding: '12px 24px', backgroundColor: '#4caf50', color: '#fff', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>Submit<\/button> <\/form> {output && ( <div style={{ marginTop: '20px', border: '1px solid #ccc', padding: '10px', borderRadius: '5px' }}> <pre>{output}<\/pre> <\/div> )} <\/div> ); };","testCases":"[{\"name\":\"1\",\"test\":\"() => { const inputField = document.getElementById('inputField'); const textareaField = document.getElementById('textareaField'); const selectField = document.getElementById('selectField'); return inputField.value === '' && textareaField?.value === '' && selectField?.value === ''; }\"},{\"name\":\"2\",\"test\":\"() => { const inputField = document.getElementById('inputField'); const textareaField = document.getElementById('textareaField'); const selectField = document.getElementById('selectField'); inputField.value = 'Test Input'; textareaField.value = 'Test Textarea'; selectField.value = 'option2'; const form = document.getElementById('formWithOutput'); form.dispatchEvent(new Event('submit')); return true; }\"},{\"name\":\"3\",\"test\":\"() => { const inputField = document.getElementById('inputField'); const textareaField = document.getElementById('textareaField'); const selectField = document.getElementById('selectField'); inputField.value = ''; textareaField.value = ''; selectField.value = ''; const form = document.getElementById('formWithOutput'); form.dispatchEvent(new Event('submit')); const submitButton = document.getElementById('submitButton'); if (submitButton) { submitButton.click(); return true } return false; }\"},{\"name\":\"4\",\"test\":\"() => { const output = document.getElementById('output'); return output.textContent === 'Input: \\\\nTextarea: \\\\nSelect: '; }\"}]","constraints":"formWithOutput: ID assigned to the outermost <div> wrapping the entire form component. inputField: ID assigned to the input field where users can enter text. textareaField: ID assigned to the textarea field where users can enter multi-line text. selectField: ID assigned to the select dropdown where users can choose options. submitButton: ID assigned to the submit button used to submit the form. output: ID assigned to the <div> that displays the output after form submission.","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react5","title":"React Task 5","order":"250","problemStatement":"const Component = () => { const [seconds, setSeconds] = React.useState(0); const [isActive, setIsActive] = React.useState(false); const intervalRef = React.useRef(null); const startTimer = () => { setIsActive(true); intervalRef.current = setInterval(() => { setSeconds((prevSeconds) => prevSeconds + 1); }, 1000); }; const stopTimer = () => { setIsActive(false); clearInterval(intervalRef.current); }; const resetTimer = () => { clearInterval(intervalRef.current); setSeconds(0); setIsActive(false); }; return ( <div style={{ textAlign: 'center' }}> <h1 style={{ fontSize: '2rem', marginBottom: '20px' }}>Timer: {seconds}s<\/h1> <button style={{ backgroundColor: isActive ? '#FF6347' : '#32CD32', color: 'white', padding: '10px 20px', fontSize: '1rem', border: 'none', borderRadius: '5px', marginRight: '10px', }} onClick={isActive ? stopTimer : startTimer} > {isActive ? 'Stop' : 'Start'} <\/button> <button style={{ backgroundColor: '#6495ED', color: 'white', padding: '10px 20px', fontSize: '1rem', border: 'none', borderRadius: '5px', }} onClick={resetTimer} > Reset <\/button> <\/div> ); };","testCases":"[{\"name\":\"1\",\"test\":\"() => { const timerDisplay = document.getElementById('timer-display'); return timerDisplay.textContent === 'Timer: 0s';}\"},{\"name\":\"2\",\"test\":\"() => { const startButton = document.getElementById('start-button'); startButton.click(); const timerDisplay = document.getElementById('timer-display'); return timerDisplay.textContent === 'Timer: 0s'; }\"},{\"name\":\"3\",\"test\":\"()=>{ setTimeout(() => { const stopButton = document.getElementById('start-button'); stopButton.click();},3000); return true }\"},{\"name\":\"4\",\"test\":\"() => { const timerDisplay = document.getElementById('timer-display'); return timerDisplay.textContent === 'Timer: 1s';}\"}]","constraints":"Timer display: timer-display Start\/Stop button: start-button (Note: Create a single button which needs to contain both stop and start) Reset button: reset-button\"","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"medium","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react6","title":"React Task 6","order":"250","problemStatement":"const Component = () => {\n const [duration, setDuration] = React.useState(2);\n const [timer, setTimer] = React.useState(null);\n const [timeLeft, setTimeLeft] = React.useState(duration);\n React.useEffect(() => {\n if (timer === null) return;\n const interval = setInterval(() => {\n setTimeLeft((prevTimeLeft) => {\n const newTimeLeft = prevTimeLeft - 1;\n if (newTimeLeft === 0) {\n clearInterval(interval);\n return \"Happy Birthday!\";\n }\n return newTimeLeft;\n });\n }, 1000);\n return () => clearInterval(interval);\n }, [timer, duration]);\n const startTimer = () => {\n setTimeLeft(duration);\n setTimer(\n setTimeout(() => {\n clearInterval(timer);\n setTimer(null);\n }, duration * 1000)\n );\n };\n const handleChange = (event) => {\n const { value } = event.target;\n setDuration(parseInt(value));\n };\n return (\n <div style={{ textAlign: \"center\", marginTop: \"20px\" }}>\n {\" \"}\n <label style={{ marginRight: \"10px\" }}>\n {\" \"}\n Enter Duration (in seconds):{\" \"}\n <input\n type=\"number\"\n value={duration}\n onChange={handleChange}\n style={{\n marginLeft: \"5px\",\n padding: \"5px\",\n border: \"1px solid black\",\n }}\n \/>{\" \"}\n <\/label>{\" \"}\n <button\n onClick={startTimer}\n style={{\n marginLeft: \"10px\",\n padding: \"5px 10px\",\n backgroundColor: \"#007bff\",\n color: \"#fff\",\n border: \"none\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n }}\n >\n {\" \"}\n Start Timer{\" \"}\n <\/button>{\" \"}\n <div style={{ marginTop: \"20px\" }}>\n {\" \"}\n {timer !== null && (\n <p style={{ fontSize: \"20px\" }}>Time Left: {timeLeft} seconds<\/p>\n )}{\" \"}\n {timer === null && timeLeft === \"Happy Birthday!\" && (\n <p style={{ fontSize: \"20px\" }}>{timeLeft}<\/p>\n )}{\" \"}\n <\/div>{\" \"}\n <\/div>\n );\n};\n","testCases":"[{\"name\":\"1\",\"test\":\"() => { const durationInput = document.getElementById('durationInput'); const startButton = document.getElementById('startButton'); return durationInput && startButton; }\"},{\"name\":\"2\",\"test\":\"() => { const durationInput = document.getElementById('durationInput'); const startButton = document.getElementById('startButton'); if (durationInput && startButton) { durationInput.value = '2'; durationInput.dispatchEvent(new Event('change')); startButton.click(); const timeLeft = document.getElementById('timeLeft'); return timeLeft && timeLeft.textContent === 'Time Left: 2 seconds'; } return false; }\"},{\"name\":\"3\",\"test\":\"() => { const durationInput = document.getElementById('durationInput'); const startButton = document.getElementById('startButton'); if (durationInput && startButton) { return new Promise((resolve) => { setTimeout(() => { const birthdayMessage = document.getElementById('birthdayMessage'); resolve(birthdayMessage && birthdayMessage.textContent === 'Happy Birthday!'); }, 4000); }); } return false; }\"}]","constraints":"durationInput (ID for Input Field) startButton (ID for Start Timer Button) timeLeft (ID for Time Left Display) birthdayMessage (ID for \"Happy Birthday!\" Message Display) Give the initial value of duration as 2","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"medium","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react7","title":"React Task 7","order":"400","problemStatement":"const conversionRates = { inr: { usd: 0.014, eur: 0.012, gbp: 0.010, }, usd: { inr: 71.27, eur: 0.86, gbp: 0.74, }, eur: { inr: 81.64, usd: 1.16, gbp: 0.86, }, gbp: { inr: 97.51, usd: 1.35, eur: 1.17, },};const Component=()=> { const [amount1, setAmount1] = React.useState(''); const [amount2, setAmount2] = React.useState(''); const [currency1, setCurrency1] = React.useState('inr'); const [currency2, setCurrency2] = React.useState('usd'); const handleAmount1Change = (event) => { const value = event.target.value; setAmount1(value); convert(value, currency1, currency2); }; const handleAmount2Change = (event) => { const value = event.target.value; setAmount2(value); convert(value, currency2, currency1); }; const handleCurrency1Change = (event) => { const value = event.target.value; setCurrency1(value); convert(amount1, value, currency2); }; const handleCurrency2Change = (event) => { const value = event.target.value; setCurrency2(value); convert(amount2, currency1, value); }; const convert = (value, fromCurrency, toCurrency) => { const rate = conversionRates[fromCurrency][toCurrency]; const convertedAmount = parseFloat(value) * rate; if (!isNaN(convertedAmount)) { if (toCurrency === currency2) { setAmount2(convertedAmount.toFixed(2)); } else { setAmount1(convertedAmount.toFixed(2)); } } }; return ( <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}> <div style={{ marginBottom: '20px', display: 'flex' }}> <input type=\"number\" value={amount1} onChange={handleAmount1Change} placeholder=\"Enter amount\" style={{ padding: '10px', fontSize: '16px', border: '1px solid #ccc', borderRadius: '5px', marginRight: '10px', width: '200px' }} \/> <select value={currency1} onChange={handleCurrency1Change} style={{ padding: '10px', fontSize: '16px', border: '1px solid #ccc', borderRadius: '5px' }} > <option value=\"inr\">INR<\/option> <option value=\"usd\">USD<\/option> <option value=\"eur\">EUR<\/option> <option value=\"gbp\">GBP<\/option> <\/select> <\/div> <div style={{ marginBottom: '20px', display: 'flex' }}> <input type=\"number\" value={amount2} onChange={handleAmount2Change} placeholder=\"Converted amount\" style={{ padding: '10px', fontSize: '16px', border: '1px solid #ccc', borderRadius: '5px', marginRight: '10px', width: '200px' }} \/> <select value={currency2} onChange={handleCurrency2Change} style={{ padding: '10px', fontSize: '16px', border: '1px solid #ccc', borderRadius: '5px' }} > <option value=\"inr\">INR<\/option> <option value=\"usd\">USD<\/option> <option value=\"eur\">EUR<\/option> <option value=\"gbp\">GBP<\/option> <\/select> <\/div> <\/div> );};","testCases":"[{\"name\":\"1\",\"test\":\"() => { return ( document.getElementById('amount1')?.value === '' && document.getElementById('amount2')?.value === '' ); }\"},{\"name\":\"2\",\"test\":\"() => { const amount1Input = document.getElementById('amount1'); const currency1Select = document.getElementById('currency1'); const currency2Select = document.getElementById('currency2'); if (amount1Input && currency1Select && currency2Select) { amount1Input.value = '100'; amount1Input.dispatchEvent(new Event('change', { bubbles: true })); currency1Select.value = 'inr'; currency1Select.dispatchEvent(new Event('change', { bubbles: true })); currency2Select.value = 'usd'; currency2Select.dispatchEvent(new Event('change', { bubbles: true })); return document.getElementById('amount2')?.value === ''; } return false; }\"},{\"name\":\"3\",\"test\":\"() => { const amount2Input = document.getElementById('amount2'); const currency1Select = document.getElementById('currency1'); const currency2Select = document.getElementById('currency2'); if (amount2Input && currency1Select && currency2Select) { amount2Input.value = '10'; amount2Input.dispatchEvent(new Event('change', { bubbles: true })); currency1Select.value = 'usd'; currency1Select.dispatchEvent(new Event('change', { bubbles: true })); currency2Select.value = 'inr'; currency2Select.dispatchEvent(new Event('change', { bubbles: true })); return document.getElementById('amount1')?.value === ''; } return false; }\"}]","constraints":"Input 1 (Amount 1):ID: amount1Select Dropdown 1 (Currency 1):ID: currency1Input 2 (Amount 2):ID: amount2Select Dropdown 2 (Currency 2):ID: currency2Currencies used:const conversionRates = { inr: { usd: 0.014, eur: 0.012, gbp: 0.01, }, usd: { inr: 71.27, eur: 0.86, gbp: 0.74, }, eur: { inr: 81.64, usd: 1.16, gbp: 0.86, }, gbp: { inr: 97.51, usd: 1.35, eur: 1.17, },};","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react8","title":"React Task 8","order":"400","problemStatement":"const Component=()=> { const [countries] = React.useState([ { id: 1, name: 'USA', capital: 'Washington, D.C.' }, { id: 2, name: 'United Kingdom', capital: 'London' }, { id: 3, name: 'France', capital: 'Paris' }, { id: 4, name: 'Germany', capital: 'Berlin' }, { id: 5, name: 'Japan', capital: 'Tokyo' }, ]); const [selectedCountry, setSelectedCountry] = React.useState(null); const handleCountryClick = (countryId) => { const country = countries.find((c) => c.id === countryId); setSelectedCountry(country); }; return ( <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px', maxWidth: '400px', margin: 'auto' }}> <h1 style={{ textAlign: 'center', marginBottom: '20px' }}>Countries and Capitals<\/h1> <ul style={{ listStyleType: 'none', padding: 0 }}> {countries.map((country) => ( <li key={country.id} style={{ padding: '10px', backgroundColor: '#f2f2f2', borderRadius: '5px', cursor: 'pointer', marginBottom: '5px', }} onClick={() => handleCountryClick(country.id)} > {country.name} <\/li> ))} <\/ul> {selectedCountry && ( <div style={{ marginTop: '20px', padding: '10px', border: '1px solid #ccc', borderRadius: '5px' }}> <h2 >{selectedCountry.name}<\/h2> <p >Capital: {selectedCountry.capital}<\/p> <\/div> )} <\/div> ); }; ","testCases":"[{\"name\":\"1\",\"test\":\"() => { return document.getElementById('heading') !== null; }\"},{\"name\":\"2\",\"test\":\"() => { return document.getElementById('country-list') !== null; }\"},{\"name\":\"3\",\"test\":\"() => { const franceCountry = document.getElementById('country-3'); if (franceCountry) { franceCountry.click(); const selectedCountryName = document.getElementById('selected-country-name'); const selectedCountryCapital = document.getElementById('selected-country-capital'); return selectedCountryName && selectedCountryName.textContent === 'France' && selectedCountryCapital && selectedCountryCapital.textContent === 'Capital: Paris'; } return false; }\"},{\"name\":\"4\",\"test\":\"() => { const japanCountry = document.getElementById('country-5'); if (japanCountry) { japanCountry.click(); const selectedCountryName = document.getElementById('selected-country-name'); const selectedCountryCapital = document.getElementById('selected-country-capital'); return selectedCountryName && selectedCountryName.textContent === 'Japan' && selectedCountryCapital && selectedCountryCapital.textContent === 'Capital: Tokyo'; } return false; }\"}]","constraints":"\"country-capital\" (div)This is the main container for the entire component. It wraps around the heading, country list, and selected country details.\"heading\" (h1)This ID is applied to the heading element (<h1>) that displays \"Countries and Capitals\". It represents the title of the list.\"country-list\" (ul)This ID is applied to the unordered list (<ul>) element that contains the list of countries. It represents the container for all the country items.\"country-[id]\" (li)Each country in the list has an ID in the format \"country-[id]\". For example, \"country-1\", \"country-2\", etc.These IDs are applied to the list item (<li>) elements that represent individual countries in the list.They are used to uniquely identify each country in the list.\"selected-country\" (div)This ID is applied to the container (<div>) that displays the details of the selected country.It wraps around the selected country's name and capital.\"selected-country-name\" (h2)This ID is applied to the heading element (<h2>) that displays the name of the selected country.It represents the title for the selected country's details.\"selected-country-capital\" (p)This ID is applied to the paragraph element (<p>) that displays the capital of the selected country.It represents the description or information about the selected country's capital.","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"react9","title":"React Task 9","order":"400","problemStatement":"const Component=()=> { const [usd, setUSD] = React.useState(''); const [eur, setEUR] = React.useState(''); const [gbp, setGBP] = React.useState(''); const [jpy, setJPY] = React.useState(''); const [aud, setAUD] = React.useState(''); const handleInputChange = (value, currency) => { const numericValue = parseFloat(value); if (!isNaN(numericValue)) { switch (currency) { case 'usd': setUSD(value); setEUR((numericValue * 0.85).toFixed(2)); setGBP((numericValue * 0.72).toFixed(2)); setJPY((numericValue * 109.89).toFixed(2)); setAUD((numericValue * 1.32).toFixed(2)); break; case 'eur': setUSD((numericValue * 1.18).toFixed(2)); setEUR(value); setGBP((numericValue * 0.85).toFixed(2)); setJPY((numericValue * 129.07).toFixed(2)); setAUD((numericValue * 1.55).toFixed(2)); break; case 'gbp': setUSD((numericValue * 1.39).toFixed(2)); setEUR((numericValue * 1.18).toFixed(2)); setGBP(value); setJPY((numericValue * 151.89).toFixed(2)); setAUD((numericValue * 1.83).toFixed(2)); break; case 'jpy': setUSD((numericValue * 0.0091).toFixed(2)); setEUR((numericValue * 0.0078).toFixed(2)); setGBP((numericValue * 0.0066).toFixed(2)); setJPY(value); setAUD((numericValue * 0.012).toFixed(2)); break; case 'aud': setUSD((numericValue * 0.76).toFixed(2)); setEUR((numericValue * 0.65).toFixed(2)); setGBP((numericValue * 0.55).toFixed(2)); setJPY((numericValue * 82.54).toFixed(2)); setAUD(value); break; default: break; } } }; const inputStyle = { padding: '8px', fontSize: '16px', border: '1px solid #ccc', borderRadius: '4px', marginBottom: '10px', width: '200px', }; return ( <div style={{ fontFamily: 'Arial, sans-serif', textAlign: 'center' }}> <h1>Currency Converter<\/h1> <div> <label>USD:<\/label> <input type=\"number\" value={usd} onChange={(e) => handleInputChange(e.target.value, 'usd')} style={inputStyle} \/> <\/div> <div> <label>EUR:<\/label> <input type=\"number\" value={eur} onChange={(e) => handleInputChange(e.target.value, 'eur')} style={inputStyle} \/> <\/div> <div> <label>GBP:<\/label> <input type=\"number\" value={gbp} onChange={(e) => handleInputChange(e.target.value, 'gbp')} style={inputStyle} \/> <\/div> <div> <label>JPY:<\/label> <input type=\"number\" value={jpy} onChange={(e) => handleInputChange(e.target.value, 'jpy')} style={inputStyle} \/> <\/div> <div> <label>AUD:<\/label> <input type=\"number\" value={aud} onChange={(e) => handleInputChange(e.target.value, 'aud')} style={inputStyle} \/> <\/div> <\/div> );};","testCases":"[{\"name\":\"1\",\"test\":\"() => { return ( document.getElementById('usd').value === '' && document.getElementById('eur').value === '' && document.getElementById('gbp').value === '' && document.getElementById('jpy').value === '' && document.getElementById('aud').value === '' ); }\"},{\"name\":\"2\",\"test\":\"() => { const usdInput = document.getElementById('usd'); usdInput.value = '100'; usdInput.dispatchEvent(new Event('input')); return document.getElementById('eur').value === ''; }\"},{\"name\":\"3\",\"test\":\"() => { const gbpInput = document.getElementById('gbp'); gbpInput.value = '50'; gbpInput.dispatchEvent(new Event('input')); return document.getElementById('usd').value === '100'; }\"}]","constraints":"US Dollar (USD)Converting USD to EUR involves multiplying the USD value by 0.85, GBP by 0.72, JPY by 109.89, and AUD by 1.32.Euro (EUR)Converting EUR to USD requires multiplying the EUR value by 1.18, GBP by 0.85, JPY by 129.07, and AUD by 1.55.British Pound (GBP)Converting GBP to USD requires multiplying the GBP value by 1.39, EUR by 1.18, JPY by 151.89, and AUD by 1.83.Japanese Yen (JPY)Converting JPY to USD involves multiplying the JPY value by 0.0091, EUR by 0.0078, GBP by 0.0066, and AUD by 0.012.Australian Dollar (AUD)Converting AUD to USD involves multiplying the AUD value by 0.76, EUR by 0.65, GBP by 0.55, and JPY by 82.54.each input field is assigned a unique ID (usd, eur, gbp, jpy, aud) ","starterCode":"const Component=()=>{\n return(\n <div>\n Hello\n <\/div>\n )\n}","category":"React_Js","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"test1","title":"Design 1","order":"-1","problemStatement":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" \/> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/> <title>Document<\/title> <style> body { margin: 0; padding: 0; } .container { border: 6px solid black; display: grid; grid-template: repeat(3, 94px) \/ repeat(3, 194px); width: 600px; height: 300px; } .grid-items { text-align: center; padding: 1rem; font-size: 1rem; color: white; } .item1 { background-color: #ffa500; justify-self: stretch; } .item2 { background-color: rgb(169, 139, 82); align-self: start; justify-self:center } .item3 { background-color: rgb(34, 49, 30); justify-self: stretch; } .item4 { background-color: rgb(92, 46, 207); place-self: center; } .item5 { background-color: rgb(5, 4, 3); } .item6 { background-color: rgb(206, 17, 124); place-self: center; } .item7 { background-color: rgb(53, 248, 235); place-self: start end; } .item8 { background-color: rgb(16, 135, 74); align-self: end; } .item9 { background-color: rgb(216, 54, 54); place-self: start } <\/style> <\/head> <body> <div class=\"container\"> <div class=\"grid-items item1\">Item 1<\/div> <div class=\"grid-items item2\">Item 2<\/div> <div class=\"grid-items item3\">Item 3<\/div> <div class=\"grid-items item4\">Item 4<\/div> <div class=\"grid-items item5\">Item 5<\/div> <div class=\"grid-items item6\">Item 6<\/div> <div class=\"grid-items item7\">Item 7<\/div> <div class=\"grid-items item8\">Item 8<\/div> <div class=\"grid-items item9\">Item 9<\/div> <\/div> <\/body> <\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"colors used:#ffa500 (orange) - Used in .item1 rgb(169, 139, 82) (brownish) - Used in .item2 rgb(34, 49, 30) (dark green) - Used in .item3 rgb(92, 46, 207) (purple) - Used in .item4 rgb(5, 4, 3) (dark gray) - Used in .item5 rgb(206, 17, 124) (pink) - Used in .item6 rgb(53, 248, 235) (cyan) - Used in .item7 rgb(16, 135, 74) (green) - Used in .item8 rgb(216, 54, 54) (red) - Used in .item9","starterCode":"\/\/do the design here","category":"Test","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"trans1","title":"Transition task 1","order":"400","problemStatement":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Card Flip Animation<\/title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; background: linear-gradient(to right, #8360c3, #2ebf91); } .card-container { perspective: 1000px; width: 300px; height: 200px; } .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotateY(0); transition: transform 0.6s ease-in-out; } .card-container:hover .card { transform: rotateY(180deg); } .card-side { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: bold; color: white; } .card-front { background-color: #4caf50; } .card-back { background-color: #2196f3; transform: rotateY(180deg); } <\/style> <\/head> <body> <div class=\"card-container\"> <div class=\"card\"> <div class=\"card-side card-front\">Front Side<\/div> <div class=\"card-side card-back\">Back Side<\/div> <\/div> <\/div> <\/body> <\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Colors: Background Gradient: Gradient from purple to greenish-teal: #8360c3 (purple) #2ebf91 (teal) Card Front Side: Solid green: #4caf50 Card Back Side: Solid blue: #2196f3 Text Color: White: #ffffff Sizes: Card Container: Width: 300px Height: 200px Card: Matches the container: Width: 300px Height: 200px Border Radius: 12px for rounded corners on both front and back sides. Text: Font size: 20px Font weight: bold","starterCode":"\/\/do design here","category":"Transition","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""},{"id":"trans2","title":"Transition Task 2","order":"400","problemStatement":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Rectangle to Circle Hover<\/title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f9; font-family: Arial, sans-serif; } .container { display: flex; justify-content: center; align-items: center; } .rectangle { width: 200px; height: 100px; background-color: #3498db; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 18px; font-weight: bold; text-transform: uppercase; border-radius: 10px; transition: all 0.4s ease; cursor: pointer; } .rectangle:hover { width: 100px; height: 100px; border-radius: 50%; transform: translateY(-50px); } .rectangle:hover span { font-size: 14px; opacity: 0.8; } <\/style> <\/head> <body> <div class=\"container\"> <div class=\"rectangle\"> <span>Hover Me<\/span> <\/div> <\/div> <\/body> <\/html>","testCases":"[{\"id\":\"1\",\"inputText\":\"1\",\"outputText\":\"1\"}]","constraints":"Colors Used: Rectangle (Default): #3498db (blue). Text: #ffffff (white). Sizes: Rectangle: Width: 200px. Height: 100px. Circle (on hover): Width: 100px. Height: 100px. Text: Font size: 18px (default). Font size: 14px (on hover).","starterCode":"\/\/write your program here","category":"Transition","difficulty":"easy","blacklist":"[]","whitelist":"[]","imageUrl":"","answer":""}]