This is a fun little puzzle game with CSS Grid. You have to turn off all the lights, but you can only toggle whole rows and whole columns.
If you get stuck, try the RESET button, or let the computer SOLVE it for you!
NOTE: it's not really a cake, so slightly off topic, but before you can eat the cake, you have to turn off the lights ☺ EDIT: You can easily edit the board dimensions in the HTML. It's a lot easier with a bigger board.
| <svg id="symbols"> | |
| <symbol id="square" viewBox="0 0 128 128"> | |
| <path style="fill:none;stroke:#aad400;stroke-width:4px;stroke-linecap:square;" d="M35,43 l0,40 l30,0 l0,-40 l30,0 l0,40" /> | |
| </symbol> | |
| <symbol id="sawtooth" viewBox="0 0 128 128"> | |
| <path style="fill:none;stroke:#c83737;stroke-width:4px;stroke-linecap:square;stroke-linejoin:bevel;" d="M30,80 l30,-40 l0,40 l30,-40 l0,40"/> | |
| </symbol> | |
| <symbol id="triangle" viewBox="0 0 128 128"> | |
| <path style="fill:none;stroke:#2a7fff;stroke-width:4px;stroke-linecap:square;stroke-linejoin:bevel;" d="M30,80 l17,-40 l17,40 l17,-40 l17,40"/> | |
| </symbol> |
| canvas#mycanvas |
| <div id="app"></div> |
| <div class="header"> | |
| <h1>Waves</h1> | |
| <p>Waves generated with javascript and <canvas>.</p> | |
| </div> | |
| <div class="canvas-wrap"> | |
| <canvas id="canvas"></canvas> | |
| </div> | |
| <div class="content"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate rerum nemo, autem. Maiores quibusdam asperiores iste laboriosam deleniti quo ratione voluptatem expedita temporibus facere velit cum nesciunt, doloremque ducimus consequuntur numquam, accusamus porro a quam. Perspiciatis quo voluptates dolores error temporibus optio, placeat minus deserunt accusamus, doloribus repellat sed ut!</p> | |
| <p>Beatae ullam repellendus tempore, dicta excepturi necessitatibus magnam praesentium illum voluptates nihil, fugiat est, corporis. Reiciendis veritatis facere reprehenderit nemo quod temporibus ea assumenda nulla iure, mollitia beatae debitis consequuntur a blanditiis quasi suscipit eos ab repellendus deleniti fuga accusamus officia maxime perferendis modi! Fugiat libero incidunt sunt nostrum harum?</p> |
| <div id="app" :style="{background: gradient}"> | |
| <div class="container"> | |
| <transition-group name="flip-list" tag="ul"> | |
| <li v-for="(color,index) in colors" :key="color.id" :class="{shake : color.last}"> | |
| <div class="move"> | |
| <button class="up" @click="up(index)" v-if="index>0"></button> | |
| <button class="down" @click="down(index)" v-if="index<colors.length-1"></button> | |
| </div> | |
| <input type="text" v-model.trim="color.hex" maxlength="7" :style="{color: color.hex}" :class="{pin : color.disabled}" :disabled="color.disabled"> | |
| <button @click="lockColor(index)" :class="{locked : color.disabled}"></button> |
| <div id="app"></div> |
| <div id="app"> | |
| </div> |
| <div id="app"> | |
| <div class="search"> | |
| <div class="icon"> | |
| <div class="circle"></div> | |
| <div class="bar"></div> | |
| </div> | |
| <div class="search-input"> | |
| <input type="text" placeholder="Search..." v-model="searchQuery"> | |
| </div> | |
| </div> |