vinç hizmetleri
Ordu Vinç Hizmetleri
Bu proje, kullanıcıya etkileşimli bir modal (açılır/kapanır pencere) sağlamayı hedefler. Bu modal, bir düğmeye tıklanması sonucunda açılır ve bir 'X' düğmesine veya modal dışına tıklanması sonucu kapanır.
Proje, HTML, CSS ve Vanilla Javascript kullanılarak oluşturulmuştur. HTML ile, uygulamanın temel yapısı oluşturulmuştur. 'Open Modal' butonu, 'Close' butonu ve modalın kendisi bu yapıya dahil edilmiştir.
CSS ile, uygulamanın kullanıcı arayüzü tasarlanmıştır. Modalın merkezde konumlandırılması, butonların stillendirilmesi ve kullanıcı etkileşimi sonucu oluşacak değişikler (Modalın açılması ve kapanması), CSS ile gerçekleştirilmiştir.
Vanilla Javascript kullanılarak, butonlara tıklanması sonucu modalın açılması ve kapanması işlevselliği sağlanmıştır. 'Open Modal' butonuna tıklanması, modalın görünür hale gelmesini sağlar. 'Close' butonuna veya modalın dışına tıklanması ise, modalın görünmez hale gelmesine yol açar. Bu işlevselliği sağlamak için, CSS stillerini dinamik bir şekilde değiştiren Javascript fonksiyonları kullanılmıştır.
Projeyi Görüntüle
Bu proje, kullanıcıların farklı kategorilerde yemek seçeneklerini görüntüleyebileceği bir menü uygulaması oluşturmayı amaçlar. Bu için, JSON objemizdeki verileri ve React Hookları kullanacağız.
Uygulamanın oluşturulma süreci ve CSS adımları önceki projelere benzer. Menü componenti oluşturuldu. Bu component içerisinde, yemek kategorilerini ve bu kategorilerin yemeklerini listelemek için React Hooks kullanıldı.
Öncelikle, projemizi yapılandırdık. Daha sonra CSS, veri objesini ve componenti React ve useState kullanarak import ettik. App return'ü basit bir şekilde oluşturduk. Verilerimizi çekip bunları bir değişkene aktardık. Veri objemizi map kullanarak ayırdık ve döngü içerisinde, öncekilerden farklı olarak, componentimizi return ettik. Her bir componentimizin key değeri olarak id aldık ve geri kalan arrayi ...{} kullanarak return ettik.
Sonrasında componentimize gelip useState'i ve gerekli olan yemek kategorilerini import ettik. Return oluşturduk ve ilgili yerlerde objelerimizi çağırdık. Daha sonra, her bir yemek kategorisi için bir buton ekledik.
CSS ile tasarımımızı yaptık. Bu için grid ve flex yapılarını kullandık. Sonunda, butonlarımıza onclick özelliğini tanımladık. İçerisine basit bir fonksiyon ekledik. İşte bu kadar. Uygulamamız kullanıma hazır hale geldi.
Projeyi Görüntüle